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

onChangeイベントの後に setTimeout を実行し、多数の変更を追跡して、イベントの発生後に変更が行われたかどうかを判断できます。その時間内に変更が行われなかった場合、クエリを送信できます。

e.g ..など：

var changes = 0;

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

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