Angular JS在一次性回覆後取消了去抖功能

Question

我在教程中看到了針對angular js的去抖功能。它運行良好（但我不太瞭解代碼）。

的問題是：

你能解釋一下去抖是如何工作的？

如何在一次工作後重置去抖功能？

function debounce(callback, interval) { 
       var timeout = null; 
       return function() { 
        $timeout.cancel(timeout); 
        timeout = $timeout(callback, interval); 
       }; 
      }; 

      inputNgEl.bind('keydown keypress', debounce(function() { 
       el.toggleClass('has-error', formCtrl[inputName].$invalid); 
       el.toggleClass('has-success', formCtrl[inputName].$valid); 
      }, 1000)); 

Answer 1

你能解釋一下這是如何去抖作品？

debounce(callback, 1000)返回一個新函數。所以這inputNgEl.bind('keydown keypress',debounce(callback, 1000))附加function從debounce返回作爲事件處理程序inputNgEl。

當事件發生的附加事件處理函數被調用行導致可能多次：

time (in 100ms): 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18  
keepresses  :  ↓  ↓          ↓ 
time to fire :  10 9 8 10 9 8 7 6 5 4 3 2 1 ✦  10 9 
callback 
(in 100ms) 

所以當事件處理程序（從debounce返回）被稱爲timeout變量是null。調用$timeout.cancel(null)什麼都不做。接下來我們時間表callback功能1000 ms後使用$timeout服務調用。該呼叫返回promise，將在給定的超時（1000ms）過後解決。

現在第二次調用事件處理程序時，timeout變量有promise，所以我們取消它--函數將不會被調用。接下來我們立即時間表callback函數再次被執行後1000 ms和存儲一個新promise裏面timeout變量。

如何在一次工作後重置去抖功能？

我不確定你的意思是重置的功能？ callback之後立即稱爲debounce功能狀態和行爲幾乎與初始狀態相同 - 除了timeout變量。

如果你想刪除的callback後的反跳效應被稱爲是第一次，你可以這樣做：

function debounce(callback, interval) { 
    var timeout = null; 
    var inner = function() { 
     $timeout.cancel(timeout); 

     if(inner.interval){ 
      timeout = $timeout(function(){ 
       callback(); 
       inner.interval = null; 
      }, interval); 
     } else { 
      callback(); 
     } 
    }; 
    inner.interval = interval; 
    return inner; 
}; 

這一次超時後基本上經過將切換到立即調用callback。