学习Javascript之节流和防抖

最新推荐文章于 2024-05-25 09:30:00 发布

ZYQZXF

最新推荐文章于 2024-05-25 09:30:00 发布

阅读量203

点赞数

原文链接：https://juejin.im/post/5e63141d518825493c7b64e0

版权

前言

本文1012字，阅读大约需要4分钟。

总括: 本文通过实例介绍了什么是节流函数，什么是防抖函数。

社会犹如一条船，每个人都要有掌舵的准备。

正文

节流函数和防抖函数相信很多人都在日常业务开发中使用过，其实不管是节流函数还是防抖函数都是一种简单的高阶函数，他们都是通过将一个关键的外部变量保存在外层作用域，通过对这个变量的判断和操作来决定是否调用回调函数。

节流函数

函数节流让指函数有规律的进行调用，应用场景:

游戏中发射子弹的频率(比如1秒发射一颗);
滚动事件；

所谓节流即让回调函数在一定时间内只能调用一次，因此我们的节流函数需要的参数有两个：

回调函数；
延迟执行的时间；

实现如下：

/**
 * @param {function} fun 调用函数
 * @param {number} delay 延迟调用时间
 * @param {array} args 剩余参数
 */
const throttle = (fun, delay, ...args) => {
  let last = null;
  return (...rest) => {
      const now = + new Date();
      let _args = [...args, ...rest];
      if (now - last > delay) {
          fun.apply(null, _args);
          last = now;
      }
  }
}

解释下上面的代码，我们通过在外层函数声明一个last变量，然后返回一个函数，在该函数中获取当前的时间，拼接外层函数的剩余参数和内层函数的参数，如果当前的时间戳和上一次调用的时间戳差大于延迟时间，那么就执行回调函数。我们测试下：

var obj = { a: 1 };
var num = 0;
//实例
var throttleExample = throttle(function(...rest) {
  console.log(rest, this.a);
  num++;
}.bind(obj), 1000);
//调用
throttleExample(num);
throttleExample(num);
throttleExample(num);
//

如上代码，我们调用了三次throttleExample但只打印了一次[0] 1。节流函数顾名思义就像是控制水流的函数，让水流匀速流动的函数。也就是说在一定时间内，函数不管调用多少次，实际只执行第一次调用。

防抖函数

函数防抖让函数在”调用’’之后的一段时间后生效，应用场景:

输入框输入事件；
window.resize事件，窗口大小调整事件；
滚动事件；

和节流函数相似防抖函数同样需要两个参数：

回调函数；
延迟调用时间；

实现如下：

/**
 * @param {function} fun 调用函数
 * @param {number} delay 延迟调用时间
 * @param {array} args 剩余参数
 */
const debouce = (fun, delay, ...args) => {
  let timer = null;
  return (...rest) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
        fun.apply(null, [...args, ...rest]);
    }, delay);
  }
}

解释下上面代码，在外层函数声明一个timer变量，内层函数设置定时器，在delay时间后执行该函数，并将定时器返回的标志保存在timer里面，在此期间一旦有调用，就取消定时器，重新开始定时。我们测试下：

var obj = { a: 1 };
var num = 0;
//实例
var debouceExample = debouce(function(...rest) {
  console.log(rest, this.a);
  num++;
}.bind(obj), 1000);
//调用
debouceExample(num);
debouceExample(num);
debouceExample(num);

如上代码调用三次debouceExample函数，1秒后打印一次[0] 1。防抖函数顾名思义防止函数抖动，在一定时间内不管调用多少次，执行的都会是最后一次的调用。而且最后一次的调用时间是在一定时间之后。