JS防抖

本篇文章参考了以下两处优秀的链接,并以自己更容易理解的方式综合了两处的代码
JavaScript专题之跟着underscore学防抖
JavaScript中的定时控制-Throttle、Debounce、Immediate的基本概念

直接上代码:

html:无修改

<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
    <title>debounce</title>
    <style>
        #container{
            width: 100%; height: 200px; line-height: 200px; text-align: center; color: #fff; background-color: #444; font-size: 30px;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <script src="debounce.js"></script>
</body>

</html>

debounce.js:

"use strict"
var count = 1;
var container = document.getElementById('container');

function getUserAction() {
    container.innerHTML = count++;
};


function debounce(func, wait, immediate) {
  // func: 要debounce的函数
  // wait:等待的事件
  // immediate:是否是immediate,即立即执行后再防抖 
  var timeout; //setTimeout事件ID
  var safe = true; //是否是首次,能否立即执行
  var result; // func返回的结果
  return function() {
    var context = this;
    var args = arguments;
    if (timeout) clearTimeout(timeout);

    if (immediate) { //立即执行
      if (safe) { //首次立即触发,并关闭可触发状态
        result = func.apply(context, args);
        safe = false;
      }
      timeout = setTimeout(function(){
        safe = true; //wait时间后开启可触发状态。若一直抖动,则一直不是可触发状态
      }, wait)
    }
    else { //不立即执行
      timeout = setTimeout(function(){
        func.apply(context, args) //wait时间后执行,若一直抖动,则一直不执行
      }, wait);
    }
    return result
  }
}


container.onmousemove = debounce(getUserAction, 1000, false);
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章