防抖和节流

概述

在 JavaScript 中，防抖（debouncing）和节流（throttling）都是用于优化性能的技术，它们可以减少浏览器事件的触发次数，从而提高页面的响应速度。

• 防抖：防抖是指在一段时间内，不断有事件触发，但只执行最后一次。防抖常用于输入框自动搜索，减少频繁搜索导致的性能问题。当用户连续输入时，只有等用户停止输入一定时间后才进行搜索。一般用 setTimeout 实现。
• 节流：节流是指一段时间内只允许执行一次事件。节流常用于监听滚动事件，以及短时间内只需要响应一次的事件，如拖拽事件。通过设置一个时间戳，判断当前时间戳与上次执行时间戳之间的差是否超过指定时间间隔，从而决定是否触发事件。

区别：

• 防抖的本质是：每次事件触发都取消原来的延时调用，重新创建一个新的延时调用，直到事件触发 n 秒内没有新的事件进来，然后才执行一次延时回调。
• 节流的本质是：每次触发事件就判断是否到了执行时间，如果到了执行，然后重置执行时间。这样可以保证某个函数周期性执行。

因此，防抖适用于需要等待一段时间后执行的场景（如输入框等待用户输入完成后再进行搜索），而节流适用于周期性执行的场景（如页面滚动场景）。

例子（防抖）

      // html
     <button id="debounce">防抖</button>
     // js
     function bounce(fn, delay) {
          let timer = null
          return function () {
            clearTimeout(timer)
            timer = setTimeout(function () {
              fn.apply(this, arguments)
            }, delay)
          }
    }
    document.getElementById('bounce').addEventListener(
          'click',
          bounce(() => {
            console.log('bounce--click')
          }, 1000)
        )

频繁点击防抖按钮 在预设时间触发事件，会重新记时，只会执行最后一次

例子（节流）

      // html
     <button id="throttle">节流</button>
    // js
    function throttle(fn,delay){
        let lastTime = 0
        return function(){
        let curTime = new Date().getTime()
        if(curTime - lastTime > delay){
               fn.apply(this,arguments)
               lastTime = curTime 
            }
        }
    }
    window.addEventListener("scroll",throttle(() =>{
        console.log("界面滚动")
    },1000
))