我有一段计算量很大的代码,它通过 DOM 操作执行数据集的过滤。我将其设为异步以确保大量 fiter 项目的性能可接受:
.on('input', function {
setTimeout(function(){
// heavy computation
}, 0)
})
问题在于,这部分可能会在每次用户输入更改时运行,但只有最后一次输入的结果才是有用的。那么,我的问题是,有没有办法取消之前执行重计算部分的“线程”,只执行最新的?
到目前为止,我的最佳想法是使用某种信号量(可能是 $.Deferred)并尝试减少临界区。
最佳答案
如果您只需要最终结果,请使用 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">
关于javascript - 高效的异步过滤器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41537927/