防抖函数

概念

触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间， 一般应用于输入实时查询

思路

在高频触发事件的时候，取消原来的延时事件

  const debounce = (fn: any, delay = 1000) => {
      console.log('1')
    let timeout = null as any;
    return function() {
        console.log(timeout, '2')
        timeout && clearTimeout(timeout);
        timeout = setTimeout(fn, delay);
    }
  }

  const handlerChange = debounce(function () {alert('更新触发了')})
// 绑定监听
document.querySelector("input").addEventListener('input', handlerChange);

 

节流

概念

高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率；

思路

每次触发事件时都判断当前是否有等待执行的延时函数，如果有就直接截断事件不用往下执行了

const throttle = (fn) => {
    let canUse = true;
    return () => {
        if (!canUse) {return false}
        canUse = false // 利用闭包刚进来的时候关闭开关
        setTimeout(() => {
            canUse = true // 执行完才打开开关
        }, 500)
    }
}

 

相关参考

知乎：函数防抖与函数节流 大佬司徒正美的文章。