学习Javascript之节流和防抖

前言

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

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

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

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

正文

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

节流函数

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

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

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

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

实现如下：

/**
 * @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