1

私はJavaScriptフレームワークとしてYUIを使用しており、ユーザーが基本的な入力フィールドの値を変更したときに正常に反応できます。反応はAjaxクエリを送信することです。

ただし、複数選択のドロップダウンリストではそれほど幸運ではありません。

  • 「変更」を聞くと、ユーザーが選択範囲にアイテムを追加/削除するたびにクエリが送信されます
  • 「ぼかし」を聞くには、フォーカスを失ってクエリを送信するためにユーザーが他の場所をクリックする必要があります（あまり使用できません）。さらに、ユーザーが何も変更せずにリストをスクロールするだけの場合（役に立たない、混乱する）、クエリを送信します。

巧妙な振る舞いを使用するアイデア（YUIを使用）はありますか？または、実際に変更をリッスンしてタイムアウトを実装する必要がありますか（クエリを送信する前に後続の変更を待機するため）？

4

2 に答える 2

4

キーイベントで必要なのと同じ種類のタイムアウトを使用して、ユーザーが入力を終了したことを検出します。同じアプローチを問題に使用できます。

// 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関数が呼び出された場合にタイマーをリセットします。

于 2009-11-29T21:06:56.443 に答える
1

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

たとえば、次のようなものです。

var changes = 0;

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

  setTimeout(function() { 
    if (local_change === changes) {
      sendRequest();
    }
  }, 500);
}
于 2009-11-29T21:05:18.647 に答える