防抖和节流

最新推荐文章于 2025-02-16 15:01:53 发布

原创最新推荐文章于 2025-02-16 15:01:53 发布 · 182 阅读

CC 4.0 BY-SA版权

一次点击触发一次事件，当用户频繁点击按钮也会频繁触发事件，但是这里大部分触发都是没有意义的，为了解决这个问题，就需要防抖

防抖：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。

// 防抖函数，返回一个函数
  function debounce(fn) {
    // 用来标记本次点击的计时器
    let timeout = null;
    return function () {
      // 每次点击会结束上一次的计时器
      clearTimeout(timeout);
      // 创建新的计时器
      timeout = setTimeout(() => {
        fn.apply(this, arguments)
      }, 500);
    }
  }

通过闭包的形式，将timeout和计时器一同返回，当被执行时就会结束之前的计时器，所以即使多次触发（相隔不超过500ms），也只会执行同一个fn，通过apply改变fn的this指向

arguments就是不确定的参数，当不确定函数有多少个参数的时候，就可以使用arguments

function test() {
    var s = "";
    for (var i = 0; i < arguments.length; i++) {
    alert(arguments[i]);
        s += arguments[i] + ",";
    }
    return s;
}

test("name", "age"); // name,age

arguments对象是所有（非箭头）函数中都可用的局部变量。你可以使用arguments对象在函数中引用函数的参数。此对象包含传递给函数的每个参数，第一个参数在索引0处。

Arguments 对象： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments

但是，虽然说是大部分触发无效，但是又不希望他一直都不触发，比如一个用户一直玩滚动条，这样就一直都无法触发函数。

那么可以给他一个时间限制，超出这个时间限制的话，不像防抖那样即使重复触发也会执行的，就是节流

节流：指定时间间隔内只会执行一次任务。

function throttle (fn) {
    let canRun = true;
    return function () {
      if(!canRun) return;
      // 重复点击时，在时间结束前防止重复执行
      canRun = false;
      // 最多
      setTimeout(() => {
        fn.call(this, arguments);
        canRun = true;
      }, 3000)
    }
  }

跟防抖不一样的思路，整个时间段内只有一个计时器，效果就是从第一次触发到3000ms里的重复触发都不会执行fn，在3000ms之后执行一次fn

参考资料：