9012年了,不做不懂函数防抖和函数节流的前端

概述

  • 函数防抖: 任务频繁触发的情况下,只有任务触发的间隔超过指定间隔的时候,任务才会执行。
  • 函数节流: 指定时间间隔内只会执行一次任务,原本可能会无时无刻执行的函数。

总之都是为了节省计算资源。

函数防抖(debounce)

场景:

  • 如今很多网站为了提高用户体验,不会再输入框失去焦点的时候再去判断用户名是否被占用,而是在输入的时候就在判断这个用户名是否已被注册。当用户输入第一个字符后的一段时间内如果还有字符输入的话,那就暂时不去请求判断用户名是否被占用。
  • 用户注册时候的手机号码验证和邮箱验证

任务频繁触发的情况下,只有足够的空闲时间,才执行代码一次。

基本思想:通过闭包保存一个标记(timeout)来保存 setTimeout 返回的值,每当用户输入的时候把前一个 setTimeout clear 掉,然后又创建一个新的 setTimeout,这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话,就不会执行 fn 函数了。

函数防抖的要点:也是需要一个setTimeout来辅助实现。延迟执行需要跑的代码。
如果方法多次触发,则把上次记录的延迟执行代码用clearTimeout清掉,重新开始。
如果计时完毕,没有方法进来访问触发,则执行代码。

// 函数防抖
function debounce(handlerFunc, interval = 300) {
    let timeout = null;
    return function () {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
            handlerFunc.apply(this, arguments);
        }, interval);
    };
}
//绑定监听
window.addEventListener('resize', () => {
    debounce(this.onResize, 40)
}, false);

函数节流(throttle)

场景:过多的DOM相关操作可能会导致浏览器挂起,有时候甚至会崩溃。比如:onresize、onscroll、mousemove等。

为了避免类似问题,就可以使用定时器对该函数进行节流。

基本思想:某些代码不可以在没有间断的情况下连续重复执行,就是一定时间内函数只执行一次。

第一次调用函数,创建一个定时器,在指定的时间间隔之后运行代码。当第二次调用函数时,它会清除前一次的定时器并设置另一个。如果前一个定时器尚未执行,就是将其替换为一个新的定时器,目的是只有在执行函数的请求停止了一段时间之后才执行。

函数节流的要点:声明一个变量(resizeTimeout)当标志位,记录当前代码是否在执行。

  • 如果空闲,则可以正常触发方法执行。
  • 如果代码正在执行,则取消这次方法执行。

注意:只要是代码周期性执行的,都应该使用节流,但是并不能控制请求执行的速率。

// 函数节流
function throttle(handlerFunc, timeout = 66) {
  let resizeTimeout;
  if (!resizeTimeout) {
    resizeTimeout = setTimeout(() => {
      resizeTimeout = null;
      handlerFunc();
      // The actualResizeHandler will execute at a rate of 15fps
    }, timeout);
  }
}
//绑定监听
window.addEventListener('resize', () => {
    throttle(this.onResize, 40)
}, false);

总结

函数防抖和函数节流的名字起得易混淆,要找技巧理解记忆,通俗易懂的说:

  • 函数防抖就像快递小哥先将外卖攒着一起,只有规定间隔内没有其他配单的时候,才集中送一次。
  • 函数节流就像王者荣耀中人物释放技能之后,需要CD冷却时间过了,才可以再放。


    王者英雄王昭君

像这样,是不是就好理解这两个概念了

推荐阅读更多精彩内容