Home

jQuery évènements stopScroll et stopResize

Submitted by PiTiLeZarD on Thu, 07/15/2010 - 17:03
Tagged:

Encore une fois un besoin qui devrait être par défaut dans jQuery mais qui se customize plutôt bien: avoir des évènements stopScroll et stopResize qui nous indique quand cette opération est terminée plutôt qu'en temps réel.

En utilisant l'api de jQuery des special events on peut enregistrer nos propres évènements qui sont du coup valable avec bind par exemple.

Là l'idée c'est de pouvoir dire par exemple :

  1. $(window).bind('stopresize', function() { alert('ok il a finit de toucher sa souris tu peux y aller ...'); });

Et pareil avec le scroll. Je m'en sert pour faire suivre un skycraper le long de la page, ou pour l'afficher désafficher en fonction de la taille de la page en largeur ... mais si on le fait en temps réel d'une ça plombe les perf, le navigateur rame, et de deux si on utilise des animations il en fait des files et le truc s'arrête plus jamais de bouger ...

Donc voila la solution toute cuite qui marche très bien : (ça marche avec une latence qu'on peut régler par évènement, donc a vous de jouer là)

  1. (function(){
  2.  
  3.     var special = jQuery.event.special,
  4.         uid1 = 'D' + (+new Date()),
  5.         uid2 = 'D' + (+new Date() + 1);
  6.  
  7.     special.resizestop = {
  8.         latency: 300,
  9.         setup: function() {
  10.             var timer,
  11.                     handler = function(evt) {
  12.  
  13.                     var _self = this,
  14.                         _args = arguments;
  15.  
  16.                     if (timer) {
  17.                         clearTimeout(timer);
  18.                     }
  19.  
  20.                     timer = setTimeout( function(){
  21.                         timer = null;
  22.                         evt.type = 'resizestop';
  23.                         jQuery.event.handle.apply(_self, _args);
  24.                     }, special.resizestop.latency);
  25.                 };
  26.  
  27.             jQuery(this).bind('resize', handler).data(uid1, handler);
  28.         },
  29.         teardown: function() {
  30.             jQuery(this).unbind('resize', jQuery(this).data(uid1) );
  31.         }
  32.     };
  33.  
  34.     special.scrollstop = {
  35.         latency: 300,
  36.         setup: function() {
  37.             var timer,
  38.                     handler = function(evt) {
  39.  
  40.                     var _self = this,
  41.                         _args = arguments;
  42.  
  43.                     if (timer) {
  44.                         clearTimeout(timer);
  45.                     }
  46.  
  47.                     timer = setTimeout( function(){
  48.                         timer = null;
  49.                         evt.type = 'scrollstop';
  50.                         jQuery.event.handle.apply(_self, _args);
  51.                     }, special.scrollstop.latency);
  52.                 };
  53.  
  54.             jQuery(this).bind('scroll', handler).data(uid2, handler);
  55.         },
  56.         teardown: function() {
  57.             jQuery(this).unbind('scroll', jQuery(this).data(uid2) );
  58.         }
  59.     };
  60. })();