Как лучше всего реализовать AJAX-слайдеры? - PullRequest
Новая
       19

Как лучше всего реализовать AJAX-слайдеры?

1 голос
/ 14 декабря 2011

Я работаю над сайтом, на котором перечислены многие вещи для продажи, такие как gumtree или craigslist.

Мы создаем «слайдер», чтобы пользователи могли легко уточнить свой поиск по цене. Пользователь может:

  • сдвиньте элемент управления влево или вправо, чтобы изменить минимальную / максимальную цену
  • или щелкните отдельные стрелки вверх / вниз для минимального и максимального значений
  • или введите число в каждом поле.

В настоящее время он работает так, что после изменения любого элемента управления списки обновляются только после изменения фокуса . Но во время тестирования мы видим, что некоторые пользователи не меняют фокус или просто нажимают на полосу прокрутки браузера, что не меняет фокус.

Мы не можем обновлять списки слишком быстро, так как они выглядят как «перепрыгивающие», и мы также хотим свести HTTP-запросы к минимуму по очевидным причинам.

Какие примеры других веб-сайтов, которые хорошо решили эту проблему?

Каков наилучший способ реализовать это с точки зрения наилучшего взаимодействия с пользователем и наименьшего числа отправленных запросов?

1 Ответ

0 голосов
/ 14 декабря 2011

Не совсем jQueryUI, но что-то похожее в ExtJS: http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/view/animated-dataview.html
Слушатели событий ExtJS предлагают удобный атрибут buffer для этой цели. В этом конкретном примере это 70 мс, так что вы не видите особого эффекта.

Не уверен насчет jQuery UI, но это не должно быть сложно реализовать. Вот как это работает:

Вместо того, чтобы реагировать на событие размытия, вы должны слушать перемещение мыши, нажатие клавиши, щелчок, колесо мыши и т. Д.

  • Когда пользователь меняет фильтр: 

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