实现 AJAX“滑块”的最佳方式是什么？

【问题标题】：What's the best way to implement AJAX "sliders"?实现 AJAX“滑块”的最佳方式是什么？
【发布时间】：2011-12-15 00:33:12
【问题描述】：

我正在开发一个列出许多待售物品的网站，例如 gumtree 或 craigslist。

我们正在构建一个“滑块”，以便用户可以轻松地按价格优化搜索。用户可以：

向左或向右滑动控件以更改最低/最高价格
或单击单独的向上/向下箭头以获取最小值和最大值
或在每个框中输入一个数字。

我们目前正在使用它，以便在更改任何控件后，列表仅在焦点更改后更新。但是在测试过程中我们看到有些用户没有改变焦点，或者他们只是点击浏览器滚动条，这并没有改变焦点。

我们不能让列表更新太快，因为它们看起来会“跳来跳去”，而且出于显而易见的原因，我们还希望将 HTTP 请求保持在最低限度。

有哪些其他网站很好地解决了这个问题的例子？

就最佳用户体验和最少发送请求而言，实现这一点的最佳方式是什么？

【问题讨论】：

标签： ajax jquery-ui user-interface cross-browser user-experience

【解决方案1】：

不完全是 jQueryUI，但在 ExtJS 中有类似的东西：http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/view/animated-dataview.html
ExtJS 的事件监听器为此提供了一个方便的buffer 属性。在这个特定的示例中，它是 70 毫秒，因此您看不到太多效果。

不确定 jQuery UI，但应该不难实现。它是这样工作的：

您应该听mousemove、keydown、klick、mousewheel等，而不是对blur事件做出反应。

当用户更改过滤器时：

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

【讨论】：