对防抖和节流的理解及其应用场景

Posted 2020-11-30 ympjsc

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了对防抖和节流的理解及其应用场景相关的知识，希望对你有一定的参考价值。

在开发中，我们常常会去监听滚动事件或者用户输入框验证事件，如果事件处理没有频率限制，就会加重浏览器的负担，影响用户的体验感，

因此，我们可以采取防抖（debounce）和节流（throttle）来处理，减少调用事件的频率，达到较好的用户体验。

防抖（debounce）：

　　在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时，重新出发定时器。

<head>

<title>Document</title>

<style>

.box {

width: 200px;

height: 200px;

overflow: auto;

}

</style>

</head>

<body>

</div>

</body>

function debounce(fn, wait) {
  var timeout = null;// 使用闭包，缓存变量

  return function() {

        if(timeout !== null) {
          console.log(‘清除定时器啦‘)
          clearTimeout(timeout);  //清除这个定时器
        }
        timeout = setTimeout(fn, wait);
    }
  }
  // 处理函数
  function handle() {
      console.log(Math.random());
  }
  var container = document.getElementById(‘container‘)
  container.addEventListener(‘scroll‘, debounce(handle, 1000));

技术图片

我们可以发现，当连续触发scroll事件，handle函数只会在1秒时间内执行一次，在如果继续滚动执行，就会清除定时器，重新计时。相当于就是多次执行，只执行一次。

节流（throttle）：

　　规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

 var throttle = function(func, delay) {
    var timer = null; // 使用闭包，缓存变量
    var prev = Date.now(); // 最开始进入滚动的时间
    return function() {
      var context = this;   // this指向window
      var args = arguments;
      var now = Date.now();
      var remain = delay - (now - prev); // 剩余时间
      clearTimeout(timer);
      // 如果剩余时间小于0，就立刻执行
      if (remain <= 0) {
        func.apply(context, args);
        prev = Date.now();
      } else {
        timer = setTimeout(func, remain);
      }
    }
  }
  function handle() {
      console.log(Math.random());
  }
  var container = document.getElementById(‘container‘)
  container.addEventListener(‘scroll‘, throttle(handle, 1000));