什么是JavaScript的防抖與節(jié)流

更新時間：2021年12月29日 09:10:13 作者：前端老實人

這篇文章主要介紹了什么是JavaScript的防抖與節(jié)流,防抖是在頻繁觸發(fā)某一個事件時，一段時間內(nèi)不再觸發(fā)該事件后才會去調(diào)用對應(yīng)的回調(diào)函數(shù)，在設(shè)定間隔時間內(nèi)如果下一次事件被觸發(fā)，那么就重新開始定時器，直到事件觸發(fā)結(jié)束，節(jié)流看下面文章的具體介紹吧

一、函數(shù)防抖（debounce）

1. 什么是防抖？

函數(shù)防抖： 在頻繁觸發(fā)某一個事件時，一段時間內(nèi)不再觸發(fā)該事件后才會去調(diào)用對應(yīng)的回調(diào)函數(shù)，在設(shè)定間隔時間內(nèi)如果下一次事件被觸發(fā)，那么就重新開始定時器，直到事件觸發(fā)結(jié)束。

規(guī)定時間內(nèi)沒有繼續(xù)觸發(fā)事件的前提下，再去調(diào)用事件處理函數(shù)；

具體如下面的例子所示：

/*定義防抖函數(shù)
 * func：傳入一個函數(shù)，事件不再持續(xù)觸發(fā)時會調(diào)用該函數(shù)
 * delay:定義持續(xù)多久后執(zhí)行傳入的回調(diào)函數(shù)
 * */
 function debounce(func,delay) {
  let timer = null  // 用于保存定時器
  return function (...args) {
   // 如果定時器存在，清除定時器，隨后重新設(shè)置timer
   if(timer !== null) clearTimeout(timer)
   timer = setTimeout(func, delay)  // 超過delay為接收到事件會調(diào)用這里的func   必要的額時候可以修改func的this指向  由于timer對外部存在引用，因此不會被銷毀
  }
 }

 /*事件處理函數(shù)*/
 function testDeBounce(){
  console.log('你看我執(zhí)行了幾次？？')
 }

 // 接收debounce返回的函數(shù)
 const temp = debounce(testDeBounce(),1000)

 /*綁定事件，測試防抖函數(shù)*/
 window.addEventListener('scroll',()=>{
  temp()
 }); // 這樣寫最少調(diào)用一次事件處理函數(shù)，最多也不會多余下面的寫法執(zhí)行的次數(shù)
 window.addEventListener('scroll', testDeBounce); // 如果這樣寫的話，每當(dāng)頁面滾動就會調(diào)用事件處理函數(shù)

總結(jié)一下思路：

1.定義一個節(jié)流函數(shù)
2.函數(shù)內(nèi)部使用一個變量保存定時器
3.返回一個函數(shù)，函數(shù)內(nèi)部定義：如果定時器已經(jīng)存在就清除定時器，重新設(shè)置定時器
4.定義一個變量來接收debounce返回的函數(shù)
5.在事件的回調(diào)函數(shù)中直接調(diào)用上一步的變量接收的方法

二、函數(shù)節(jié)流

函數(shù)節(jié)流： 在事件持續(xù)觸發(fā)的前提下，保證一定時間段內(nèi)只調(diào)用一次事件處理函數(shù)，就是函數(shù)節(jié)流；

函數(shù)節(jié)流實現(xiàn)的方式： 定時器、時間戳、定時器+時間戳；

2.1 定時器實現(xiàn)

思路：

1.定義節(jié)流函數(shù)throttle
2.定義timer保存定時器
3.返回一個函數(shù)。函數(shù)內(nèi)部定義：如果定時器不存在，設(shè)置定時器，間隔某一時間后將timer設(shè)置為null，如果在這之前事件再次觸發(fā)，則定時器中的回調(diào)無效

<button>這是一個孤獨的按鈕</button>

/*
 * 定義定時器節(jié)流函數(shù)
 * func:傳入事件處理函數(shù)
 * delay：在delay指定的時間內(nèi)定時器回調(diào)無效
 * */
 function throttle(func,delay) {
  let timer = null
  const context = this
  return function(...args){
   // 如果定時器不存在
   if(!timer){
    timer = setTimeout(()=>{
     func.apply(context,args) // 考慮返回的函數(shù)調(diào)用的環(huán)境，因此這里不直接使用this
     timer = null // delay之后清除定時器
    },delay)
   }
  }
 }

 function test() {
  console.log('啊啊??！')
 }

 const temp = throttle(test,1000)

 document.querySelector('button').addEventListener('click',()=>{
  temp()
 })

2.2 時間戳實現(xiàn)

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));

2.3 時間戳+定時器

// 節(jié)流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));

到此這篇關(guān)于什么是JavaScript的防抖與節(jié)流的文章就介紹到這了,更多相關(guān)JavaScript的防抖與節(jié)流內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: