Javascript - 使用哪个事件进行多选更改

Question

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

然而，我对多选下拉列表就没那么幸运了：

• 每次用户在其选择中添加/删除项目时，收听“更改”都会发送我的查询
• 收听“blur”需要用户单击其他地方才能松开焦点并发送查询（不是很有用），此外，如果用户仅在列表上滚动而不更改任何内容，它会发送查询（无用，令人困惑）。

有什么想法（使用 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 事件之后并跟踪许多更改以确定自该事件触发以来是否已进行更改。如果在此时间内没有进行任何更改，则可以发送查询。

例如：

var changes = 0;

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

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