首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如果Javascript函数再次被调用,如何杀死它?

如果Javascript函数再次被调用,如何杀死它?
EN

Stack Overflow用户
提问于 2014-08-04 13:11:04
回答 2查看 5.7K关注 0票数 14

我有一个搜索框在我的网页,其中有复选框,以便用户过滤他们的结果。一次只能选中一个复选框。

单击复选框时,我的代码将运行,并将筛选器应用于列表并返回正确的结果。

我遇到的问题是,当快速连续多次单击复选框时,它会对请求进行排队,并一个接一个地将它们拉回来。如果选中一个复选框,然后多次取消选中,这可能需要一段时间。

Javascript中是否有任何方法通知函数它已被再次调用,并且除了这个最后的请求之外,它应该停止所有其他的东西?

EN

回答 2

Stack Overflow用户

发布于 2014-08-04 13:24:07

您可以使用锁模式:

http://jsfiddle.net/RU6gL/

HTML

代码语言:javascript
运行
复制
<input type="checkbox" onclick="fire()" >CB1
<br />
<input type="checkbox" onclick="fire()" >CB2

JS

代码语言:javascript
运行
复制
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调用来执行筛选,则可以:

  1. 在第一次单击时,设置锁
  2. 调用Ajax端点。随后的单击不会调用Ajax端点。
  3. 在Ajax成功函数中,重置锁。
  4. 现在可以再次单击复选框。

HTML

代码语言:javascript
运行
复制
<input type="checkbox" onclick="doAjax()" >CB2

JS

代码语言:javascript
运行
复制
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;
    });   
} 
票数 12
EN

Stack Overflow用户

发布于 2014-08-04 15:59:37

这里的问题是,复选框被反复单击。相反,您应该在处理过程中禁用复选框(这也将禁用元素上的单击事件),然后在完成处理时重新启用复选框。

删除是一个很好的主意,但是您并不总是知道完成处理功能需要多长时间。

下面是一个简单的示例,使用jquery承诺在处理http://jsfiddle.net/94coc8sd/之后重新启用复选框

使用以下代码:

代码语言:javascript
运行
复制
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);
票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/25119503

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档