JavaScript防抖与节流技术详解及实现-CSDN博客

本文深入探讨JavaScript中的防抖(debounce)和节流(throttle)原理，适用于按钮提交防止多次提交、搜索框联想场景以及拖拽和缩放等高频率操作。并提供了简易版和立即执行版的防抖实现，以及使用时间戳和定时器实现的节流方法。

1）防抖

原理：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
适用场景：
- 按钮提交场景：防止多次提交按钮，只执行最后提交的一次
- 搜索框联想场景：防止联想发送请求，只发送最后一次输入
简易版实现：

function debounce(func, wait) {
    let timeout;
    return function () {
        const context = this;
        const args = arguments;
        clearTimeout(timeout)
        timeout = setTimeout(function(){
            func.apply(context, args)
        }, wait);
    }
}

立即执行版实现
- 有时希望立刻执行函数，然后等到停止触发 n 秒后，才可以重新触发执行。

// 有时希望立刻执行函数，然后等到停止触发 n 秒后，才可以重新触发执行。
function debounce(func, wait, immediate) {
  let timeout;
  return function () {
    const context = this;
    const args = arguments;
    if (timeout) clearTimeout(timeout);
    if (immediate) {
      const callNow = !timeout;
      timeout = setTimeout(function () {
        timeout = null;
      }, wait)

js防抖节流原理及实现。