阅读 557

手写函数防抖和节流

函数防抖

概念:延时一段时间执行某个动作,当在这段时间内再被触发时,清除掉之前的计时重试计时。

function debounce (fn, time=300) {
    let timer // 缓存一个定时器对象
    return function (...args) {
        // 当触发时定时器对象存在,则清除重新计时
         timer && clearTimeout(timer)
         timer = setTimeout(() => {
              fn.apply(this, args) // doSomething
              timer = null
          }, time)
    }
}
复制代码

适用场景

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

函数截流

概念:在一段的时间只执行一次

function throttle (fn, time=300) {
    let flag
    return function (...args) {
        if (flag) return
        flag = setTimeout(() => {
           fn.apply(this, args) // doSomething
           flag = null
        }, time)
    }
}
复制代码
文章分类
前端
文章标签