javascript - Javascript - 用于多选更改的事件

Question

我使用 YUI 作为 javascript 框架，并且可以在用户更改基本输入字段的值时成功做出反应，反应是发送 Ajax 查询。

但是，我对多选下拉列表并不那么幸运：

• 每次用户将项目添加/删除到他的选择时，收听“更改”都会发送我的查询
• 收听“模糊”需要用户单击其他地方以释放焦点并发送查询（不是很实用），而且如果用户只在列表上滚动而不更改任何内容（无用，令人困惑），它将发送查询。

任何想法（与 YUI），会使用一个聪明的行为？还是我真的应该听更改并实施超时（在发送查询之前等待后续更改）？

Answer 1

我在关键事件上使用了您想要的相同类型的超时，以检测用户何时完成输入，可以对您的问题使用相同的方法：

// helper function
var timeout = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();

用法：

// YUI 2
YAHOO.util.Event.addListener(oElement, "change", function () {
  timeout(function () {
    // one second since the last selection change
  }, 1000);
}); 

// YUI 3
Y.on("click", function () {
  timeout(function () {
    // one second since the last selection change
  }, 1000);
}, oElement);

基本上在这个timeout函数中，如果在指定的延迟之前调用该函数，我会重置计时器。

Answer 2

您可以setTimeout在 onChange 事件之后运行 a 并跟踪许多更改以确定自事件触发以来是否进行了更改。如果在那段时间内没有进行任何更改，则可以发送查询。

例如，类似：

var changes = 0;

function myOnChangeHandler(e)
{
  changes++;
  var local_change = changes;

  setTimeout(function() { 
    if (local_change === changes) {
      sendRequest();
    }
  }, 500);
}