防抖函数

168 阅读1分钟

防抖函数原理

在事件被触发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/

微信公众号“前端那些事儿”