函数节流与函数防抖

最近经常看到“函数节流”与“函数防抖”，于是便总结了一篇文章

出现原因

某些事件，如mousemove、scroll等是会不断触发，如果对应处理函数中有执行DOM操作、加载资源的行为，那很有可能会导致浏览器卡顿、崩溃等
目前主流的解决方法为函数节流与函数防抖

函数节流

思想

当调用动作过n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间

操作

1.第一次调用函数，创建一个定时器，在指定的时间间隔之后运行代码
2.当第二次调用该函数时，清除前一次的定时器并重新设置
3.如果前一个定时器已经执行过了，清除操作并不会产生什么影响
4.如果前一个定时器尚未执行，上述操作就是将其替换为一个新的定时器

/* 一个封装节流操作的函数
   method参数为实际执行的函数
   args为要传递的参数数组
   contex参数为执行环境 */
function throttle(method,args,context){ 
    clearTimeout(method.tId);
    method.tId=setTimeout(function(){
        method.apply(context,args);
    },200);
}

function move(){
    console.log("xxx")
}
document.querySelector("#target").onmousemove=function(){
    throttle(move);
}

如果我们不进行节流，那么鼠标在target元素上做一次滑行就会执行多次move函数，而节流后move函数执行数量明显变少

局限

如果鼠标一直滑动，那么move方法永远不会执行，这时候就需要函数防抖

函数防抖

思想

预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，在这段事件内新的调用动作都将无效，然后进入下一个新周期

操作

/* 一个封装节流操作的函数
   method参数为实际执行的函数
   wait参数为时间间隔
   args为要传递的参数数组
   contex参数为执行环境 */
function debounce(method,wait,args,context){ 
    if(!method.start){
        method.start=new Date();
    }
    var now=new Date();
    if(now-method.start>=wait){
        method.apply(context,args);
        method.start=now;
    }
}

document.querySelector("#target").onmousemove=function(){
    debounce(move,2000);
}

采用函数防抖后，只要鼠标在target上滑动，每2秒执行一次move函数