防抖函数实

防抖函数原理

 

在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计算。

适用场景

1. 按钮提交场景：防止多次提交按钮，只执行最后一次提交
2. 服务端验证场景：表单验证需要服务端配合，只执行一段连续的输入事件的最后一次，还有搜索词联想功能等

函数实现

/**
* 防抖函数
*/
const debounce = (fn, delay) => {
    let timer = null;
    return (...args) => {
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, args);
        }, delay);
    }
}复制代码

参考资料

1. www.cxymsg.com/guide/

延伸阅读

---

▶ Walkthrough007