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

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

例如，像：

var changes = 0;

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

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

Javascript - 用于多选更改的事件

2 个答案: