JavaScript 手写防抖节流以及应用演示，点赞加关注持续更新~

防抖的应用演示，持续的事件触发停止时，执行最后一次

节流的应用演示，持续的事件触发，每隔一段相同的事件触发一次

防抖和节流的演示代码已上传至Incode，可以直接从文章顶部去运行

防抖节流

• 防抖（debounce）和节流（throttle）都是性能优化的手段，减少资源消耗，提高代码性能
• 防抖其实就是当事件持续触发的时候，只执行事件停止触发后的最后一次事件
• 节流与防抖类似，节流是当事件持续触发的时候，每隔相同的一段事间触发一次

防抖（debounce）

在同一时间内，连续触发事件,只处理最后一次，这样可以减少计算机算力的消耗，优化性能

防抖的主要应用场景：

1. 输入框实时搜索：当用户在输入框中输入时，你可能希望只有在用户停止输入一段时间后再执行搜索，而不是每次用户键入字符就执行搜索，这样可以减少不必要的计算和网络请求。
2. 窗口调整事件：当用户调整窗口大小时，你可能希望只有在窗口大小停止变化后的一段时间内重新计算布局，而不是每次窗口大小发生变化就重新计算，这样可以提高性能。

实现思路:

• 当事件发生，不立即执行事件回调。用定时器定个时间，在事件停止触发后一段时间后才去触发（延迟触发事件）
• 再次触发事件，先取消上次的定时器，再重新开启一个定时器（重新刷新定时器的时间）

创建一个防抖函数debounce

 // 创建一个防抖函数
    function debounce(fn, time) {
   
   
      let setId // 定义一个计时器变量，接收定时器，可以用来清楚定时器
      return function () {
   
   
        clearTimeout(setId) // 如果在规定时间内再次输入，则清除上一次计时器
        setId = setTimeout(function () {
   
   
          fn()  // 等待规定时间后执行函数
        }, time)
      }
    }

防抖函数创建完成，接下来就是来个简单的演示,完整代码如下

 <styl