什麼是JavaScript的防抖與節流

阿新 • • 發佈：2021-12-30

一、函式防抖（debounce）

1. 什麼是防抖？

函式防抖： 在頻繁觸發某一個事件時，一段時間內不再觸發該事件後才會去呼叫對應的回撥函式，在設定間隔時間內如果下一次事件被觸發，那麼就重新開始定時器，直到事件觸發結束。

規定時間內沒有繼續觸發事件的前提下，再去呼叫事件處理函式；

具體如下面的例子所示：

/*定義防抖函式
 * func：傳入一個函式，事件不再持續觸發時會呼叫該函式
 * delay:定義持續多久後執行傳入的回撥函式
 * */
 function debounce(func,delay) {
www.cppcns.com 
  let timer = null  // 用於儲存定時器
  return function (...args) {
   // 如果定時器存在，清除定時器，隨後重新設定timer
   if(timer !== null) clearTimeout(timer)
   timer = setTimeout(func,delay)  // 超過delay為接收到事件會呼叫這裡的func   必要的額時候可以修改func的this指向  由於timer對外部存在引用，因此不會被銷燬
  }
 }

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

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

 /*繫結事件，測試防抖函式*/
 window.addEventListener('scroll',()=>{
  temp()
 }); // 這樣寫最少呼叫一次事件處理函式，最多也不會多餘下面的寫法執行的次數
 window.addEventListener('scroll',testDeBounce); // 如果這樣寫的話，每當頁面滾動就會呼叫事件處理函式

總結一下思路：

1.定義一個節流函式
2.函式內部使用一個變數儲存定時器
3.返回一個函式，函式內部定義：如果定時器已經存在就清除定時器，重新設定定時器
4.定義一個變數來接收debounce返回的函式
5.在事件的回撥函式中直接呼叫上一步的變數接收的方法

二、函式節流

函式節流： 在事件持續觸發的前提下，保證一定時間段內只調用一次事件處理函式，就是函式節流；

函式節流實現的方式： 定時器、時間戳、定時器+時間戳；

2.1 定時器實現

思路：

1.定義節流函式throttle
2.定義timer儲存定時器
3.返回一個函式。函式內部定義：如果定時器不存在，設定定時器，間隔某一時間後將timer設定為null

，如果在這之前事件再次觸發，則定時器中的回撥無效

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

/*
 * 定義定時器節流函式
 * func:傳入事件處理函式
 * delay：在delay指定的時間內定時器回撥無效
 * */
 function throttle(func,delay) {
  let timer = null
  const context = this
  return function(...args){
   // 如果定時器不存在
   if(!timer){
    timer = setTimeout(()=>{
     func.apply(context,args) // 考慮返回的函式呼叫的環境，因此這裡不直接使用this
     timer = null // delay之後清除定時器
    },delay)
   }
  }
 }

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

 const temp = throttle(test,1000)

 document.querySelector('button').addEventListener('click',()=>{
  temp()
程式設計客棧 })

2.2 時間戳實現

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 時間戳+定時器

// 節流throttle程式碼（時間戳+定時器）：
var throttle = function(funwww.cppcns.comc,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',1000));

到此這篇關於什麼是的防抖與節流的文章就介紹到這了,更多相關Script的防抖與節流內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！