学习Javascript之节流和防抖

前言

本文1012字,阅读大约须要4分钟。前端

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

  • 公众号:「前端进阶学习」,回复「666」,获取一揽子前端技术书籍

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

正文

节流函数和防抖函数相信不少人都在平常业务开发中使用过,其实无论是节流函数仍是防抖函数都是一种简单的高阶函数,他们都是经过将一个关键的外部变量保存在外层做用域,经过对这个变量的判断和操做来决定是否调用回调函数。学习

节流函数

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

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

所谓节流即让回调函数在必定时间内只能调用一次,所以咱们的节流函数须要的参数有两个:this

  1. 回调函数;
  2. 延迟执行的时间;

实现以下:rest

/**
 * @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变量,而后返回一个函数,在该函数中获取当前的时间,拼接外层函数的剩余参数和内层函数的参数,若是当前的时间戳和上一次调用的时间戳差大于延迟时间,那么就执行回调函数。咱们测试下:code

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节流函数顾名思义就像是控制水流的函数,让水流匀速流动的函数。也就是说在必定时间内,函数无论调用多少次,实际只执行第一次调用游戏

防抖函数

函数防抖让函数在”调用’’以后的一段时间后生效,应用场景:事件

  1. 输入框输入事件;
  2. window.resize事件,窗口大小调整事件;
  3. 滚动事件;

和节流函数类似防抖函数一样须要两个参数:

  1. 回调函数;
  2. 延迟调用时间;

实现以下:

/**
 * @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。防抖函数顾名思义防止函数抖动,在必定时间内无论调用多少次,执行的都会是最后一次的调用。并且最后一次的调用时间是在必定时间以后。

结论

无论是节流函数仍是防抖函数目的都是为了防止某个函数屡次调用形成的bug或是空间的浪费。


能力有限,水平通常,欢迎勘误,不胜感激。

订阅更多文章可关注公众号「前端进阶学习」,回复「666」,获取一揽子前端技术书籍

前端进阶学习

相关文章
相关标签/搜索