javascript - 高效的异步过滤器

Question

我有一段计算量很大的代码，它通过 DOM 操作执行数据集的过滤。我将其设为异步以确保大量 fiter 项目的性能可接受:

.on('input', function {
    setTimeout(function(){
        // heavy computation
    }, 0)
})

问题在于，这部分可能会在每次用户输入更改时运行，但只有最后一次输入的结果才是有用的。那么，我的问题是，有没有办法取消之前执行重计算部分的“线程”，只执行最新的？

到目前为止，我的最佳想法是使用某种信号量(可能是 $.Deferred)并尝试减少临界区。

Answer 1

如果您只需要最终结果，请使用 debounced 事件处理程序。这是一个样本 debounce implementation , 但网上还有其他的。

用 debounce 包装您的事件处理程序将阻止事件处理程序触发，只要它被重复调用。只有当处理程序被调用时，处理程序才会触发，然后它会空闲一段时间。

.on('input', debounce(function {
    // heavy computation
}, 500)) // wait 500ms before firing the handler

在示例中连续输入并停止，您会看到控制台只会记录单词called 一次:

var debounce = function(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this,
            args = arguments;
        var later = function() {
            timeout = null;
            if ( !immediate ) {
                func.apply(context, args);
            }
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait || 200);
        if ( callNow ) { 
            func.apply(context, args);
        }
    };
};

$('#input').on('input', debounce(function() {
  console.log('called');
}));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input">