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。