javascript - 如果再次调用 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);

为什么禁用点击事件，将 disabled 属性添加到复选框而不是仅仅一个全局锁定变量？好吧，全局锁可能有点容易出错，但更重要的是，我们已经有了一个在 DOM 中很重要的全局对象。如果我们只是修改 DOM 状态，我们就会得到正确的行为，并向我们的用户发出信号，让他们在搜索完成之前不要选中复选框。

也就是说，对于任何类型的锁定/解除绑定(bind)场景，使用加载微调器或您正在做的事情向用户指示可能是有意义的。