前言

在前端开发当中我们经常会绑定一些事件触发的某些程序执行,有时这些事件会连续触发,如浏览器窗口的 scrollresize,输入框的 keyupinput,以及 click 事件在连续点击时连续发送请求等等,这些情况有些会严重影响前端性能,有些会增加服务器压力,使用户体验大打折扣,而函数节流和防抖就是为了解决这样的问题。

函数节流 throtter

函数节流:当持续发生事件时,保证在一个固定的时间间隔只执行一次真正的事件处理程序,通俗的说就像 “节流” 的名字一样,打开水龙头时要秉承勤俭节约的原则,把阀门关小,最好是达到在固定间隔内水一滴一滴的往下流。

节流函数的时序图


函数节流时序图
函数节流时序图


从图中可以看出,连续触发事件时,真正执行事件处理程序的间隔是固定的,多次触发,也只会在某一个时间间隔内触发一次,由于事件处理函数内部执行逻辑各不相同,我们就封装一版可通用的节流函数。

节流函数的封装

/* 文件:throtter.js */
// 节流函数
const throtter = (func, delay = 60) => {
  // 锁的标识
  let lock = false;

  // 返回一个事件处理函数
  return (...args) => {
    // 如果 lock 为 true 则跳出
    if (lock) return;

    // 执行函数并更改锁的状态
    func(...args);
    lock = true;

    // 添加定时器,在到达时间间隔时重置锁的状态
    setTimeout(() => lock = false, delay);
  }
}

throtter 函数有两个参数,第一个参数为在事件触发时真正要执行的函数,第二个参数为定义的间隔时间,在函数执行时定义了 lock 的初始值,通过闭包返回一个函数作为事件处理函数,在返回的函数内部判断 lock 状态并确定执行真正的函数 func 还是跳出,每次执行 func 后会更改 lock 状态,通过定时器在规定的时间间隔内重置 lock,这就是函数节流的原理。

验证节流函数

/* 文件:throtter-test.js */
// 使用节流函数
document.addEventListener('scroll', throtter(console.log));

上面我们给 document 对象添加了滚动事件,并不断的打印事件对象,事件处理函数的默认参数为事件对象,从执行效果应该可以看出,平均每 60ms 才会触发一次事件,达到了优化性能的目的,如果想让真正执行的函数 func 传入更多的参数,只需如下处理。

/* 文件:throtter-test.js */
// a b 为函数要传入的参数
const a = 1, b = 2;

// 返回事件处理函数
const func = throtter(console.log);

// 添加事件监听
document.addEventListener('scroll', e => func(e, a, b));

节流函数一般用于 scrollresize 事件的情况较多,因为这些事件的触发是连续性的,需要在一个时间间隔内只触发一次。

函数防抖 debounce

函数防抖:当持续发生事件时,事件只在上一次触发后的一段时间内没再触发事件,才会真正的执行事件处理逻辑,如果每两次触发的间隔小于这个时间,则不执行事件逻辑。

防抖函数的时序图


函数防抖时序图
函数防抖时序图


从图中可以看出,连续触发事件时并没有执行事件处理函数,只有在某一阶段连续触发后的最后一次才执行,也就是上一次触发的时间间隔要大于设定值才执行,同样的,事件处理函数内部执行逻辑各不相同,我们就封装一版可通用的防抖函数。

防抖函数的封装

/* 文件:debounce.js */
// 防抖函数
const dobounce = (func, delay = 300, timer = null) => {
  return (...args) => {
    // 清除定时器
    clearInterval(timer);

    // 在定时器到时后执行事件处理函数
    timer = setTimeout(() => func(...args), delay);
  }
}

dobounce 函数有三个参数,第一个参数为在事件触发时真正要执行的函数,第二个参数为执行事件的延迟时间,第三个参数为定时器 ID 的初始值,执行 dobounce 通过闭包返回了事件处理函数,在处理函数内部先清除定时器,然后定义定时器并将 ID 赋值给 timer,如果事件连续触发,则会不断的清除定时器,直到有一次触发间隔超过了设定延时时间 delay,才会真正执行 func

验证防抖函数

<!-- 文件:index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>函数防抖</title>
</head>
<body>
  <input type="text" id="ipt">
</body>
</html>
/* 文件:debounce-test.js */
// 使用防抖函数
const ipt = document.querySelector('#ipt');

// 添加事件监听
ipt.addEventListener('keyup', debounce(console.log));

上面的功能跟 throtter 类似,真正执行事件处理函数时打印事件对象,通过验证,连续输入触发 keyup 事件,上一次触发和下一次触发间隔时间必须大于 300ms 才会执行打印事件对象的逻辑,如果想传入多个参数套路相同。

/* 文件:debounce-test.js */
// 获取 dom 元素
const ipt = document.querySelector('#ipt');

// a b 为函数要传入的参数
const a = 1, b = 2;

// 返回事件处理函数
const func = debounce(console.log);

// 添加事件监听
ipt.addEventListener('keyup', e => func(e, a, b));

防抖函数一般用于输入框事件,常用场景就是搜索或查询,如果不使用防抖会连续发送请求,增加服务器的压力,使用防抖后,会在用户输入要查询的关键词后才发送请求,这也更符合用户的习惯,例如百度搜索,就是这样实现的。

总结

“节流” 和 “防抖” 是前端在项目中经常使用的优化手段,代码虽然不多,但是确是前端面试 “出镜率” 非常高的知识点,从而能看出它们的重要性,所以建议前端同学们一定要知道,并能手写,这是 “一箭双雕” 的事,可以用来通过面试,也可以因为工作中遇到直接就写而提高工作效率。