Quelle est la meilleure façon d'implémenter les "curseurs" AJAX?

Question

Je travaille sur un site Web qui répertorie beaucoup de choses à vendre, comme gumtree ou craigslist.

Nous construisons un "curseur" afin que les utilisateurs puissent facilement affiner leur recherche par prix. L'utilisateur peut:

• slide un contrôle à gauche ou à droite pour changer le prix minimum/maximum
• ou cliquez sur séparer flèches haut/bas pour les minimales et maximales
• ou tapez un numéro dans chaque case.

Nous avons actuellement fonctionner de sorte qu'après le changement de tout contrôle, les listes sont mises à jour seulement après la mise au point est changé. Mais pendant le test, nous voyons que certains utilisateurs ne changent pas le focus, ou ils ne cliquent ensuite que sur la barre de défilement du navigateur, ce qui ne change pas le focus.

Nous ne pouvons pas mettre à jour les listes trop rapidement, car elles sembleront 'sauter', et nous voulons aussi minimiser les requêtes HTTP, pour des raisons évidentes.

Quels sont les exemples d'autres sites qui ont bien résolu ce problème? Quelle est la meilleure façon de mettre en œuvre cela, en termes de meilleure expérience utilisateur et moins de demandes envoyées?

Answer 1

Pas exactement jQueryUI, mais quelque chose de semblable dans ExtJS: http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/view/animated-dataview.html
les écouteurs d'événements de ExtJS offrent une pratique buffer attribut pour cette fin. Dans cet exemple particulier, c'est 70ms donc vous ne voyez pas beaucoup d'effet.

Vous n'êtes pas sûr de l'interface utilisateur jQuery, mais cela ne devrait pas être difficile à mettre en œuvre. Voici comment cela fonctionne:

Au lieu de réagir à l'événement de flou, vous devriez écouter mousemove, keydown, Klick, mouseWheel etc.

• Lorsque l'utilisateur change filtre:

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

• lorsque la liste est rechargée/détruite ou qu'un autre filtre est appliqué:

  window.clearTimeout(listing.timer); 
  

• eventHandler ressemble à quelque chose comme

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