JavaScript之节流与防抖

防抖

在前端开发中会遇到一些频繁的事件触发，比如：
window 的 resize、scroll
mousedown、mousemove
keyup、keydown
……
防抖的原理就是：你尽管触发事件，但是我一定在事件触发 n 秒后才执行，如果你在一个事件触发的 n 秒内又触发了这个事件，那我就以新的事件的时间为准，n 秒后才执行，总之，就是要等你触发完事件 n 秒内不再触发事件，我才执行

function debunce(fun,wait,imediate){
      let timeout;
      return function () {
           let context = this;
           let args = arguments;
           if(timeout) clearTimeout(timeout);
           if(imeaiate){
              var callNow = !timeout;
              timeout = setTimeout(()=>{
                    timeout = null;
              },wait)
              if(callNow){
                   fun.apply(context,args);
              }
           } else {
                timeout = setTimeout(()=>{
                     fun.apply(context,args);
                },wait);
           }
      }
}

节流

节流的原理很简单：如果你持续触发事件，每隔一段时间，只执行一次事件。

function throttle(fun,wait,type){
    if(type==1){
        let previous = 0;
    } else {
        let timeout;
    }
    return function() {
        var context = this;
        var args = arguments;
        if (type == 1){
            let now = Date.now();
            if(now-previous>wait){
                fun.apply(context,args);
                previous = now;
            }
        }
        if (type == 2){
            if (!timeout) {
                timeout = setTimeout(() => {
                    timeout = null;
                    fun.apply(context, args)
                }, wait)
            }
        }
    }
}