如何实现防抖和节流，以及他们的使用场景是什么？

防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。

节流：在规定的单位时间段内，函数只能执行一次，在单位时间内多少触发，则只有一次有效

使用场景：

鼠标不断的点击，用节流来限制只在规定的单位时间内执行一次函数
滚轮事件, 不断的往下滚轮，比如滚动到底部加载数据

function jieliu(fn, delay) {
    let timer;
    return function() {
        if(!timer) {
            fn.apply(this,arguments)
             timer = setTimeout(()=>{ 
                clearTimeout(timer);
                timer = null;
            },delay)
        }
    }


}
function dy (val) {
    console.log('点击了',val)
}
let jieliuFun = jieliu(dy, 1000)
let appDom = document.querySelector('#app')
appDom.addEventListener('click', function(e) {
    jieliuFun('asdasd')
})

防抖：事件被触发时，在n秒后执行函数，在n秒内多次触发事件，则重新开始计时.

适用场景：

搜索输入框搜索内容，用户在不断的输入的时候，用防抖来节约请求资源
不断的触发window的resize事件，不断的改变窗口大小，利用防抖函数来只执行一次

// 定义一个请求函数
function request(val) {
    console.log("request: " + val);
}

// 定义一个防抖函数
function debounce(fn, delay) {
    let timeout;
    return function(){
      clearTimeout(timeout)
      timeout = setTimeout(()=>{
        fn.apply(this, arguments)
      },delay)
    }
}

let inputEl = document.getElementById("input");

let debounceInput = debounce(request, 500)

inputEl.addEventListener("keyup", function (e) {
    debounceInput(e.target.value);
});

防抖 (debounce)

防抖，顾名思义，防止抖动，以免把一次事件误认为多次，敲键盘就是一个每天都会接触到的防抖操作。
想要了解一个概念，必先了解概念所应用的场景。在 JS 这个世界中，有哪些防抖的场景呢

function debounce (f, wait) {
  let timer
  return (...args) => {
    clearTimeout(timer)
    timer = setTimeout(() => {
      f(...args)
    }, wait)
  }
}

节流 (throttle)

节流，顾名思义，控制水的流量。控制事件发生的频率，如控制为1s发生一次，甚至1分钟发生一次。与服务端(server)及网关(gateway)控制的限流 (Rate Limit) 类似。

scroll 事件，每隔一秒计算一次位置信息等浏览器播放事件，每个一秒计算一次进度信息等input 框实时搜索并发送请求展示下拉列表，没隔一秒发送一次请求 (也可做防抖)

function throttle (f, wait) {
  let timer
  return (...args) => {
    if (timer) { return }
    timer = setTimeout(() => {
      f(...args)
      timer = null
    }, wait)
  }
}

总结 (简要答案)

防抖：防止抖动，单位时间内事件触发会被重置，避免事件被误伤触发多次。代码实现重在清零

节流：控制流量，单位时间内事件只能触发一次，如果服务器端的限流即 Rate Limit。代码实现重在开锁关锁

最后编辑于：2021.12.09 10:41:01