AJAXの「スライダ」を実装する最善の方法は何ですか？

Question

私は、gumtreeやcraigslistのような、多くのものを販売しているウェブサイトに取り組んでいます。

ユーザーは簡単に価格で検索を絞り込むことができるように「スライダ」を構築しています。ユーザーができ：

• スライド制御/最小値を変更する最大価格
• 又は最小値と最大
• または各ボックスに数値を入力の両方のための矢印をアップ/ダウン分離クリックを左または右。

我々は現在、すべてのコントロールを変更した後、リストはフォーカスがを変更した後にのみに更新されるように、それが働いています。しかしテスト中に、一部のユーザーはフォーカスを変更しないか、フォーカスを変更しないブラウザのスクロールバーをクリックするだけです。

リストの更新が早す​​ぎると、「飛び回っている」ように見えることがあります。明らかな理由から、HTTPリクエストも最小限に抑えたいと考えています。

この問題をうまく解決した他のウェブサイトの例は何ですか？

最高のユーザーエクスペリエンスと最低限のリクエストという点で、これを実装する最良の方法は何ですか？

Answer 1

ない正確jQueryUIが、ExtJSの中に似たような：http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/view/animated-dataview.html
のExtJSのイベントリスナーは、非常に目的のために便利なbuffer属性を提供します。この特定の例では、70msなので、効果はほとんど見られません。

jQuery UIについてはわかりませんが、実装するのは難しいことではありません。それがどのように動作するかです：

は

代わりにblurイベントに反応させること、あなたがMOUSEMOVEに耳を傾ける必要があり、KeyDownイベントは、klickは、マウスホイールなど

• ユーザーが変更フィルタ：

  if (listing.timer) { window.clearTimeout(listing.timer); } 
  listing.timer = window.setTimeout(eventHandler, buffer); 
  

• リロード/破棄などのフィルタを適用した場合の

  window.clearTimeout(listing.timer); 
  

• EventHandlerは

  function eventHandler() { 
      window.clearTimeout(listing.timer); 
      delete listing.timer; 
      // cancel pending requests if present... 
      sendRequest(getFilterValues(), ...); 
  } 
  

ようになります