防抖的原理

防抖的使用场景：

将一段时间内连续的多次触发转化为一次触发。

例如：一般可以使用在用户输入停止一段时间过后再去获取数据，而不是每次输入都去获取

<!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>
<div id="cancel">取消</div>
<script>

  //防抖的原理：你尽管出发事件，但是我一点要在出发n秒之后才实行
  // 如果你在一个事件触发n秒内又触发，那就以新的事件为准
  //总之需要等到n秒内不再出发事件，我再实行
  var count = 1;
  var container = document.getElementById('container');
  var cancel = document.getElementById('cancel');

  function debounce(func, wait, immediate) {
    var timeout,result;

    //定义debounced函数，方便在器属性上面添加新的cancel取消函数
    var debounced = function () {
      var context = this;//保存当前this指向对象
      var args = arguments; //获取函数的参数

      if(timeout) clearTimeout(timeout);//清除以前的定时器，保证最新的

      //如果immediate是true的话，会有result返回值，否则无
      if (immediate){//立即实行函数
        var callNow = !timeout;//获取定时器的编号
        timeout = setTimeout(function () {
          timeout = null//n秒后取消定时器
        }, wait);

        //如果已经点击了再不给点击了
        if(callNow) result = func.apply(context, args);

      }else{
        //n秒后施行func方法
        timeout = setTimeout(function () {
          func.apply(context, args)//通过apply调用，指向this对象，并输入参数
        }, wait);
      }
      return result
    };

    //添加取消函数的方法
    debounced.cancel = function () {
      clearTimeout(timeout);
      timeout = null;
    };

    return debounced;
  }

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

  var setUseAction  = debounce(getUserAction,1000,true);

  container.onmousemove = setUseAction;
  document.getElementById("cancel").addEventListener('click', function(){
    setUseAction.cancel();
  })
</script>
</body>

</html>

Mr航

发布了80 篇原创文章 · 获赞 5 · 访问量 4万+

私信关注

猜你喜欢