手写函数防抖和节流

函数防抖

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

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)
    }
}