如果再次调用Javascript函数怎么杀？

Question

我的网页上有一个搜索框,其中包含复选框,以便用户过滤其结果.一次只能检查一个复选框.

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

我遇到的问题是,当快速连续点击多次复选框时,它会将请求排队并逐个拉回.如果选中复选框然后多次取消选中,则可能需要一段时间.

在Javascript中是否有任何方式通知函数它已被再次调用它应该停止除了最后一个请求之外的所有内容？

Answer 1

你想把你的onclick回调包装在去抖动函数中

http://underscorejs.org/#debounce

说你有这个

function search() {
    // ...
}

$jquery(".myFilterCheckboxes").click(search);

您应该可以将上面的内容更改为:

// Only allow one click event / search every 500ms:
$jquery(".myFilterCheckboxes").click(_.debounce(search, 500));

有大量的去抖动函数,如果你不能或不想包含underscore.js,那么编写自己的函数并不是什么大问题.

我的第一个想法是去抖动,因为你提到了在短时间内创建多个事件的多次点击.去抖动经常用于提前搜索或自动完成等事情,以便在按键之间为思考时间提供一点空间.

正如其他人所提到的,在搜索运行时简单地禁用复选框/单击事件可能更有意义.在这种情况下,尝试这样的事情:

function disableClick(elem) {
  elem.unbind("click");
  elem.attr("disabled", true);
}

function enableClick(elem, onclick) {
  // Enable click events again
  elem.live("click", search);
  // Enable the checkboxes
  elem.removeAttr("disabled");
}

function search() {
  var boxes = $jquery(".myFilterCheckboxes");
  disableClick(boxes);
  $.get(...).always(function() {
    enableClick(boxes, search);
  });
}

$jquery(".myFilterCheckboxes").live("click", search);

为什么要禁用click事件,将disabled属性添加到复选框而不仅仅是全局锁定变量？好吧,全局锁可能有些容易出错,但更重要的是,我们已经拥有了一个在DOM中很重要的全局对象.如果我们只修改DOM状态,我们会得到正确的行为,并向用户发出信号,告知他们应该在复选框上放松,直到搜索完成.

也就是说,使用任何类型的锁定/解除绑定方案来向用户指示加载微调器或您正在工作的东西可能是有意义的.

Answer 2

您可以使用锁定模式:

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秒钟释放锁定为止.

这种模式相当不错,因为它可以在你释放锁定时控制opver,而不是像'debounce'那样依赖于定时间隔.例如,它将与Ajax一起使用.如果您的复选框正在触发Ajax调用以进行过滤,您可以:

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

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;
    });   
}