防抖和节流 及其实现

防抖函数

你尽管触发事件，但是我一定在事件触发 n 秒后才执行，如果你在一个事件触发的 n 秒内又触发了这个事件，那我就以新的事件的时间为准，n 秒后才执行，总之，就是要等你触发完事件 n 秒内不再触发事件，我才执行

实现

function debounce(fn){
    let timeout = null;
    return function(){
          clearTimeOut(timeout)
          setTimeOut(() =>{
                fn.apply(this,arguments)
          },500)
    }
}

节流函数

防抖动和节流是不一样的.本质上,防抖动是将多次执行变成最后一次执行.节流是将多次执行变成每隔多久执行一次.减少函数执行频率.

实现

function throttle(fn){
    let canRun = true;
    return function(){
          if(!canRun) return;
          canRun = false;
          setTimeOut(() => {
                fn.apply(this,argument)
                canRun = true;
          },500)
    }
}