Comment exécuter $(window).resize() une seule fois une fois le redimensionnement de la fenêtre terminé ?

Achèvement de l'événement de ciblage : $(window).resize() après l'exécution

Lors de l'utilisation de $(window).resize(function() { ... }) pour surveiller le redimensionnement de la fenêtre du navigateur, vous pouvez rencontrer plusieurs déclenchements d'événements lors du réglage manuel de la fenêtre. Ce problème survient lorsque l'événement se déclenche à chaque fois que la bordure de la fenêtre est déplacée, ce qui entraîne un comportement indésirable. Pour résoudre ce problème, explorons une solution qui garantit que l'exécution se produit uniquement une fois le processus de redimensionnement terminé.

L'extrait de code ci-dessous fournit une solution pratique qui peut être utilisée dans diverses 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>

Pour utiliser cette solution, suivez ces étapes :

1. Implémentez un écouteur d'événement personnalisé pour le redimensionnement de la fenêtre.

<code class="javascript">$(window).resize(function () {</code>

2. Dans l'écouteur d'événement , invoquez waitForFinalEvent pour définir un délai d'expiration pour le rappel.

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

Le paramètre 500 représente un délai de 500 millisecondes, ce qui laisse suffisamment de temps pour que le processus de redimensionnement se termine. Le paramètre uniqueId garantit que plusieurs rappels peuvent utiliser le même mécanisme de délai d'attente sans interférence.

Cette solution modifiée vous permet de définir plusieurs rappels qui s'exécutent une fois le redimensionnement de la fenêtre terminé, répondant ainsi efficacement à différentes sections de votre code.

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!