Comment empêcher plusieurs déclenchements d'événements $(window).resize ?

Résolution de plusieurs déclenchements d'événements de redimensionnement avec $(window).resize

Dans le développement Web, la manipulation de la taille de la fenêtre du navigateur à l'aide de l'événement $(window).resize peut déclencher plusieurs tirs. Pour résoudre ce problème, nous explorons une solution qui exécute une fonction uniquement une fois l'opération de redimensionnement terminée.

Solution :

Pour appeler une fonction une fois le redimensionnement de la fenêtre du navigateur est terminé, nous pouvons utiliser la fonction waitForFinalEvent. Cette fonction prend une fonction de rappel, un délai d'une milliseconde et un identifiant unique comme arguments. La fonction définit un délai d'attente pour le rappel en fonction du délai, mais elle vérifie également s'il existe un délai d'attente précédent avec le même ID unique. Si tel est le cas, il annule le délai d'attente précédent et définit le nouveau.

Mise en œuvre :

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

Implémentez la fonction waitForFinalEvent dans votre code comme suit :

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

En fournissant un identifiant unique pour chaque rappel, cette implémentation garantit que les rappels séparés n'interfèrent pas avec les événements de délai d'attente des autres. Ainsi, la fonction ne sera exécutée qu'une fois l'opération de redimensionnement terminée, évitant ainsi plusieurs déclenchements.

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!