Comment exécuter une fonction une seule fois après le redimensionnement de la fenêtre en JavaScript/jQuery ?

Exécution retardée après le redimensionnement de la fenêtre en JavaScript/jQuery

L'événement $(window).resize en JavaScript et jQuery est déclenché lorsque le navigateur la fenêtre se redimensionne. Cependant, il se déclenche souvent plusieurs fois lors du redimensionnement manuel en faisant glisser le bord de la fenêtre.

Réalisation d'une invocation unique :

Pour appeler une fonction une seule fois après le redimensionnement, il est terminé, une minuterie peut être utilisée pour retarder l'exécution jusqu'à ce que le processus de redimensionnement soit terminé. Voici une solution :

Solution :

<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>

Utilisation :

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

Dans cette solution, un unique L'identifiant est utilisé pour chaque rappel afin de gérer plusieurs enregistrements d'événements.

Cette approche garantit que la fonction de rappel n'est appelée qu'une seule fois, après un délai spécifié, ce qui laisse suffisamment de temps pour que le redimensionnement se termine et évite le déclenchement d'événements redondants.

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!