节流函数与防抖函数

函数节流与函数防抖在日常开发中还是比较常用的。现在总结一下。

函数节流

1. 每隔一段时间，只执行一次函数。
2. 常见应用场景：
   1. 滚动加载、加载更多或滚到底部监听；
   2. 谷歌搜索，搜索联想功能；
   3. 高频点击提交，表单重复提交等；
3. 实现：

定时器实现

const throttle = (fn, delay) => {
    let timer = null;
    return (...arg) => {
        if (timer) return;
        timer = setTimeOut(() => {
            fn.apply(this, arg);
            timer = null;
        })
    }
}
// 测试代码
const throttleFn = (e, content) => {
    console.log(e, content)
}
const throttleHandler = throttle(throttleFn, 2000);
document.addEventListener("mousemove", (e) => {
    throttleHandler(e, "aa")
})

时间戳实现

const throttle = (fn,delay) => {
    let pre = 0;
    return (...arg) => {
        let now = new Date();
        if (now - pre > delay) {
            fn.apply(this, arg);
            pre = now;
        }
    }
}

函数防抖 

1. 在事件触发n秒后再触发回调函数，若n秒内事件又被触发，则重新计时。
2. 常见应用场景
   1. 搜索框搜索输入。用户最后一次输入完后再触发请求；
   2. 手机号、邮箱验证输入检测；
   3. 窗口大小resize。只在窗口resize完成后再计算窗口大小，防止重复渲染。
3. 实现

const debounce = (fn,delay) => {
    let timer = null;
    return (...arg) => {
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, arg);
        }, delay)
    }
}

// 测试代码
      const debounceFn = (e, content) => {
        console.log(e, content)
      }
      const debouncetest = debounce(throttleFn, 1000);
      document.addEventListener("mousemove", (e) => {
        debouncetest(e, 'aa')
      })