Comment empêcher plusieurs événements de redimensionnement dans JavaScript/jQuery ?

Prévention de plusieurs événements de redimensionnement dans JavaScript/jQuery

Lors de l'utilisation de $(window).resize, vous pouvez rencontrer plusieurs déclenchements de l'événement lors du redimensionnement manuel de la fenêtre. Pour résoudre ce problème et garantir que la fonction n'est appelée qu'une seule fois une fois le redimensionnement terminé, envisagez la solution suivante :

Implémentation à l'aide de waitForFinalEvent

Cette version modifiée d'une solution du CMS permet plusieurs invocations dans différentes parties de votre code :

<code class="javascript">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);
  };
})();</code>

Exemple d'utilisation

Intégrez le waitForFinalEvent dans votre code comme suit :

<code class="javascript">$(window).resize(function () {
    waitForFinalEvent(function(){
      alert('Resize...');
      //...
    }, 500, "some unique string");
});</code>

Cela garantit que lorsque le redimensionnement de la fenêtre est terminé, la fonction de rappel spécifiée dans waitForFinalEvent sera exécutée avec un délai de 500 millisecondes. Le paramètre ID unique évite les conflits lors de l'utilisation de plusieurs rappels pour le redimensionnement de la fenêtre.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!