防抖和节流的介绍以及用法

前言

以下是我找的有关防抖和节流的相关文章，内容都很不错，如果读完本文章内容的小伙伴仍是没弄懂两者的区别以及作用，也可以看看这几篇文章，内容都很丰富，相信你一定能有所收获。

防抖和节流有什么区别，分别用于什么场景 - 掘金
面试官:什么是防抖和节流?有什么区别?如何实现? | web前端面试 - 面试官系列
知乎 - 有问题，就会有答案

一、本质：

都是优化高频率执行代码的一种手段，为了优化体验，需要对某事件进行调用次数的限制，对此我们就可以采用 防抖（debounce） 和 节流（throttle） 的方式来减少调用频率

1. 防抖

定义： n 秒后再执行指定事件，若在 n 秒内被重复触发，则重新计时

应用：

• 非立即执行：执行最后一次行为动作，前面的动作都会被忽略

let time:ReturnType<typeof setTimeout> | null;
const way = ()=>{
    if (time) {
    clearTimeout(time);
    }
    time= setTimeout(回调函数, 300);
}

• 立即执行：执行第一次行为动作，后面的动作都会被忽略

let time:ReturnType<typeof setTimeout> | null;
const way = ()=>{
    if (time) {
    clearTimeout(time);
    }
     // 立即执行
    if (!time) {
     回调函数
    }
     time= setTimeout(() => {
      time= null;
    }, 300);
}

2. 节流

定义：在连续触发事件n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效

应用：

• 立即执行：n秒内重复触发，只执行第一次行为动作

let time:ReturnType<typeof setTimeout> | null;
const way = ()=>{
    if (time) reutrn
    time= setTimeout(回调函数, 300);
}

二、经典比喻

电梯第一个人进来后，等待15秒。如果过程中又有人进来，15秒等待重新计时，直到15秒后开始运送，这是防抖
电梯第一个人进来后，15秒后准时运送一次，这是节流

三、相同点

都通过使用计时器 setTimeout 实现

• 目的都是，降低回调执行频率。节省计算资源区别
• 函数防抖，在一段连续操作结束后，处理回调，利用clearTimeout和 setTimeout实现。函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能
• 函数防抖关注一定时间连续触发的事件，只在最后执行一次，而函数节流一段时间内只执行一次

四、区别

• 函数防抖，在一段连续操作结束后，处理回调，利用clearTimeout和 setTimeout实现。函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能
• 函数防抖关注一定时间连续触发的事件，只在最后执行一次，而函数节流一段时间内只执行一次