我有一个搜索框在我的网页,其中有复选框,以便用户过滤他们的结果。一次只能选中一个复选框。
单击复选框时,我的代码将运行,并将筛选器应用于列表并返回正确的结果。
我遇到的问题是,当快速连续多次单击复选框时,它会对请求进行排队,并一个接一个地将它们拉回来。如果选中一个复选框,然后多次取消选中,这可能需要一段时间。
Javascript中是否有任何方法通知函数它已被再次调用,并且除了这个最后的请求之外,它应该停止所有其他的东西?
发布于 2014-08-04 13:24:07
您可以使用锁模式:
http://jsfiddle.net/RU6gL/
HTML
<input type="checkbox" onclick="fire()" >CB1
<br />
<input type="checkbox" onclick="fire()" >CB2
JS
function_lock = false
fire = function() {
// First, check the lock isn't already reserved. If it is, leave immediately.
if (function_lock) return;
// We got past the lock check, so immediately lock the function to
// stop others entering
function_lock = true;
console.log("This message will appear once, until the lock is released")
// Do your work. I use a simple Timeout. It could be an Ajax call.
window.setTimeout(function() {
// When the work finishes (eg Ajax onSuccess), release the lock.
function_lock = false;
}, 2000);
}
在本例中,无论单击多少次复选框,该函数都只运行一次,直到超时2秒后释放锁为止。
这种模式非常好,因为它在释放锁时为您提供了控制操作程序,而不是依赖于时间间隔,比如“debounce”。例如,它将与Ajax一起工作。如果您的复选框正在触发一个Ajax调用来执行筛选,则可以:
HTML
<input type="checkbox" onclick="doAjax()" >CB2
JS
ajax_lock = false
doAjax: function() {
// Check the lock.
if (ajax_lock) return;
// Acquire the lock.
ajax_lock = true;
// Do the work.
$.get("url to ajax endpoint", function() {
// This is the success function: release the lock
ajax_lock = false;
});
}
发布于 2014-08-04 15:59:37
这里的问题是,复选框被反复单击。相反,您应该在处理过程中禁用复选框(这也将禁用元素上的单击事件),然后在完成处理时重新启用复选框。
删除是一个很好的主意,但是您并不总是知道完成处理功能需要多长时间。
下面是一个简单的示例,使用jquery承诺在处理http://jsfiddle.net/94coc8sd/之后重新启用复选框
使用以下代码:
function processStuff() {
var dfd = $.Deferred();
// do some processing, when finished,
// resolve the deferred object
window.setTimeout(function(){
dfd.resolve();
}, 2000);
return dfd.promise();
}
function startProcessing() {
$('#processingCheckbox').attr('disabled', 'disabled');
var promise = processStuff();
promise.done(enableCheckbox);
}
function enableCheckbox() {
$('#processingCheckbox').removeAttr('disabled');
}
$('#processingCheckbox').on('click', startProcessing);
https://stackoverflow.com/questions/25119503
复制相似问题