Question

我在教程中看到了针对角度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，所以我们取消它 - 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

基本上在第一次超时后，将立即切换到调用{{1}}。

Angularjs在一次迭代后取消去抖动功能

1 个答案: