防抖和节流

防抖

指触发事件后在n秒内函数只能执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间

例：

<div class="box"></box>

var box=document.querySelect('.box');
var testDebounce=testDebouce(move,1000);
box.onmousemove=testDebounce;
function move(){
    this.innerHTML=ev.clientX;
}
testDebouce(fn,awaitTime){
    var timmer=null;
    return function(){
        var arg=arguments;
        timmer&&clearTimeout(timmer);
        timmer=setTimeout(()=>{  // es6箭头函数，如使用function的话move中this的指向是window.
            fn.apply(this,arg);
        },awaitTime);
    }
}


// 鼠标第一次移入时执行一次方法
testDebouce(fn,awaitTime){
    var timmer=null;
    return function(){
        var arg=arguments;
        timmer&&clearTimeout(timmer);
        timmer=setTimeout(()=>{
            timmer=null;
        },awaitTime);
        
        if(now){
             fn.apply(this,arg);
        }
    }
}

节流

指连续触发事件但是在一段时间只执行一次函数

例：

<div class="box"></box>

var box=document.querySelect('.box');
var throttle=throttle(move,1000);
box.onmousemove=testDebounce;
function move(){
    this.innerHTML=ev.clientX;
}
throttle(fn,awaitTime){
    var timmer=null;
    return function(){
        var arg=arguments;
        if(!timmer){
            timmer=setTimeout(()=>{
                timmer=null;
                fn.apply(this,arg)
            },awaitTime);
        }
      
    }
}

// 使用时间优化

throttle(fn,awaitTime){
    var timmer=null;
    var last=0;
    return function(){
        var arg=arguments;
        var now=Date.now();
        if(now-last>awaitTime){
          fn.apply(this,arg)
          last=now;
        }
      
    }
}