JavaScript/JQuery : $(window).resize comment activer APRÈS le redimensionnement ?

Question

J'utilise JQuery comme tel :

$(window).resize(function() { ... });

Cependant, il semble que si la personne redimensionne manuellement la fenêtre de son navigateur en faisant glisser le bord de la fenêtre pour l'agrandir/la réduire, l .resize ci-dessus se déclenche plusieurs fois.

Question : Comment appeler une fonction APRÈS la fin du redimensionnement de la fenêtre du navigateur (pour que l'événement ne se déclenche qu'une seule fois) ?

Answer 1

Voici une modification de la solution de CMS qui peut être appelée à plusieurs endroits dans votre code :

var waitForFinalEvent = (function () {
  var timers = {};
  return function (callback, ms, uniqueId) {
    if (!uniqueId) {
      uniqueId = "Don't call this twice without a uniqueId";
    }
    if (timers[uniqueId]) {
      clearTimeout (timers[uniqueId]);
    }
    timers[uniqueId] = setTimeout(callback, ms);
  };
})();

Utilisation :

$(window).resize(function () {
    waitForFinalEvent(function(){
      alert('Resize...');
      //...
    }, 500, "some unique string");
});

La solution de CMS est bonne si vous ne l'appelez qu'une seule fois, mais si vous l'appelez plusieurs fois, par exemple si différentes parties de votre code mettent en place des rappels séparés pour le redimensionnement de la fenêtre, alors elle échouera car elles partagent l'adresse de l'utilisateur. timer variable.

Avec cette modification, vous fournissez un identifiant unique pour chaque rappel, et ces identifiants uniques sont utilisés pour séparer tous les événements de délai d'attente.

Answer 2

Je préfère créer un événement :

$(window).bind('resizeEnd', function() {
    //do something, window hasn't changed size in 500ms
});

Voici comment le créer :

 $(window).resize(function() {
        if(this.resizeTO) clearTimeout(this.resizeTO);
        this.resizeTO = setTimeout(function() {
            $(this).trigger('resizeEnd');
        }, 500);
    });

Vous pourriez l'avoir dans un fichier javascript global quelque part.

Answer 3

J'utilise la fonction suivante pour retarder des actions répétées, elle fonctionnera pour votre cas :

var delay = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();

Utilisation :

$(window).resize(function() {
    delay(function(){
      alert('Resize...');
      //...
    }, 500);
});

La fonction de rappel qui lui est passée, ne s'exécutera que lorsque le dernier appel à delay aura été fait après le temps spécifié, sinon un timer sera remis à zéro, je trouve cela utile pour d'autres buts comme détecter quand l'utilisateur a arrêté de taper, etc...

Answer 4

Si vous avez installé Underscore.js, vous pourriez :

$(window).resize(_.debounce(function(){
    alert("Resized");
},500));

Answer 5

Certaines des solutions mentionnées précédemment n'ont pas fonctionné pour moi, même si elles sont d'usage plus général. Alternativement, j'ai J'ai trouvé celui-ci qui a fait le travail sur le redimensionnement de la fenêtre :

$(window).bind('resize', function(e){
    window.resizeEvt;
    $(window).resize(function(){
        clearTimeout(window.resizeEvt);
        window.resizeEvt = setTimeout(function(){
        //code to do after window is resized
        }, 250);
    });
});