防抖和节流

 

1、防抖封装

 1 function debounce（func, weit, immediate）{
　　　　//定时器变量
 2     var timeout;
 3     return function() {
 4         var content = this, args = arguments;
 5         var  later = function() {
 6             timeout = null;
 7             if(!immediate) func.apply(context, args);    
 8           };
 9         var callNow = immediate && !timeout;
　　　　　　//每次触发scroll handler 时，先清除定时器
10         clearTimeout(timeout);
11         timeout = setTimeout(later, wait);
12         if(callNow) func.apply(content, args);
13     }    
14 }    
15 
16 var myscroll = (function(){
17     //滚动中的真正操作
18 },250)
19 
20 //绑定监听
21 window.addEventListener('resize', myscroll)

防抖技术即是可以把多个顺序地调用合并成一次，也就是在一定时间内，规定事件被触发的次数。 

2、节流

 

// 简单的节流函数
function throttle(func, wait, mustRun) {
    var timeout, startTime = new Date()
    return function() {
        var context = this,
            args = arguments,
            curTime = new Date()
　　　　　　//清除定时器 　　　　
        clearTimeout(timeout);
        //如果达到了预定的时间，会触发handle
　　　　  if(curTime - startTime >= mustRun){
　　　　　　func.apply(context, args);
　　　　　　startTime=curTime;
　　　　　　}else{
　　　　　　　　//没达到触发间隔，重新设置定时器
　　　　　　　　timeout=setTimeout(func,wait)
　　　　　　}
    };
};
//时间绑定在scroll事件上的handler
function realfunc(){
}
//
window.addEventListener('scroll',throttle(realfunc, 500. 2000))