实现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，但它应该不难实现。这是它的工作原理：

除了对模糊事件做出反应外，你应该听一下mousemove，keydown，klick，mousewheel等。

• 当用户更改过滤器时：

   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(), ...);
  }