关于javascript:防抖和节流

3次阅读

共计 2912 个字符，预计需要花费 8 分钟才能阅读完成。

函数防抖（debounce）：当继续触发事件时，肯定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的工夫到来之前，又一次触发了事件，就从新开始延时。如下图，继续触发 scroll 事件时，并不执行 handle 函数，当 1000 毫秒内没有触发 scroll 事件时，才会延时触发 scroll 事件。

 // 防抖
function debounce(fn, wait) {    
    var timeout = null;    
    return function() {if(timeout !== null)   clearTimeout(timeout); 
        var args = arguments    
        timeout = setTimeout(()=>{fn.apply(this,args)
        }, wait);    
    }
}
// 处理函数
function handle() {console.log(Math.random()); 
}
// 滚动事件
window.addEventListener('scroll', debounce(handle, 1000));

函数节流（throttle）：当继续触发事件时，保障肯定时间段内只调用一次事件处理函数。节流艰深解释就比方咱们水龙头放水，阀门一关上，水哗哗的往下流，秉着勤俭节约的低劣传统美德，咱们要把水龙头关小点，最好是如咱们情意依照肯定法则在某个工夫距离内一滴一滴的往下滴。如下图，继续触发 scroll 事件时，并不立刻执行 handle 函数，每隔 1000 毫秒才会执行一次 handle 函数。

函数节流次要有两种实现办法：工夫戳和定时器。接下来别离用两种办法实现 throttle~

var throttle = function(func, delay) {var prev = Date.now();            
  return function() {                
    var context = this;                
    var args = arguments;                
    var now = Date.now();                
    if (now - prev >= delay) {func.apply(context, args);                    
      prev = Date.now();}            
  }        
}        
function handle() {console.log(Math.random());        
}        
window.addEventListener('scroll', throttle(handle, 1000));

当高频事件触发时，第一次会立刻执行 （给 scroll 事件绑定函数与真正触发事件的距离个别大于 delay，如果你非要在网页加载 1000 毫秒以内就去滚动网页的话，我也没方法 o(╥﹏╥)o）， 而后再怎么频繁地触发事件，也都是每 delay 工夫才执行一次。而当最初一次事件触发结束后，事件也不会再被执行了（最初一次触发事件与倒数第二次触发事件的距离小于 delay，为什么小于呢？因为大于就不叫高频了呀(╹▽╹)）。

// 节流 throttle 代码（定时器）：var throttle = function(func, delay) {            
    var timer = null;            
    return function() {                
        var context = this;               
        var args = arguments;                
        if (!timer) {timer = setTimeout(function() {func.apply(context, args);                        
                timer = null;                    
            }, delay);                
        }            
    }        
}        
function handle() {console.log(Math.random());        
}        
window.addEventListener('scroll', throttle(handle, 1000));

当触发事件的时候，咱们设置一个定时器，再次触发事件的时候，如果定时器存在，就不执行，直到 delay 工夫后，定时器执行执行函数，并且清空定时器，这样就能够设置下个定时器。当第一次触发事件时，不会立刻执行函数，而是在 delay 秒后才执行。而后再怎么频繁触发事件，也都是每 delay 工夫才执行一次。当最初一次进行触发后，因为定时器的 delay 提早，可能还会执行一次函数。

节流中用工夫戳或定时器都是能够的。更准确地，能够用工夫戳 + 定时器，当第一次触发事件时马上执行事件处理函数，最初一次触发事件后也还会执行一次事件处理函数。

// 节流 throttle 代码（工夫戳 + 定时器）：var throttle = function(func, delay) {     
    var timer = null;     
    var startTime = Date.now();     
    return function() {var curTime = Date.now();             
        var remaining = delay - (curTime - startTime);             
        var context = this;             
        var args = arguments;             
        clearTimeout(timer);              
        if (remaining <= 0) {func.apply(context, args);                    
            startTime = Date.now();} else {timer = setTimeout(func, remaining);              
        }      
    }
}
function handle() {console.log(Math.random());
} 
window.addEventListener('scroll', throttle(handle, 1000));

在节流函数外部应用开始工夫 startTime、以后工夫 curTime 与 delay 来计算剩余时间 remaining，当 remaining<= 0 时示意该执行事件处理函数了（保障了第一次触发事件就能立刻执行事件处理函数和每隔 delay 工夫执行一次事件处理函数 ）。如果还没到工夫的话就设定在 remaining 工夫后再触发（ 保障了最初一次触发事件后还能再执行一次事件处理函数）。当然在 remaining 这段时间中如果又一次触发事件，那么会勾销以后的计时器，并从新计算一个 remaining 来判断以后状态。

函数防抖：将几次操作合并为一此操作进行。原理是保护一个计时器，规定在 delay 工夫后触发函数，然而在 delay 工夫内再次触发的话，就会 勾销之前的计时器而从新设置。这样一来，只有最初一次操作能被触发。

函数节流：使得肯定工夫内只触发一次函数。原理是通过判断是否达到肯定工夫来触发函数。

区别：函数节流不论事件触发有多频繁，都会保障 在规定工夫内肯定会执行一次真正的事件处理函数 ，而函数防抖只是在 最初一次事件后才触发一次函数。比方在页面的有限加载场景下，咱们须要用户在滚动页面时，每隔一段时间发一次 Ajax 申请，而不是在用户停下滚动页面操作时才去申请数据。这样的场景，就适宜用节流技术来实现。

正文完