Comment détecter des événements précis de redimensionnement de fenêtre en JavaScript/jQuery ?

Détection d'événements précis de redimensionnement de fenêtre dans JavaScript/jQuery

Lors de l'utilisation de $(window).resize pour surveiller les changements de taille de fenêtre, il est courant de rencontrer plusieurs déclenchements d’événements lors du redimensionnement manuel. Cela peut être problématique lorsque vous devez exécuter du code uniquement une fois le redimensionnement terminé.

Solution :

Pour résoudre ce problème, nous pouvons utiliser la fonction waitForFinalEvent :

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

Cette fonction garantit que le rappel n'est exécuté qu'après un délai spécifié (500 ms par défaut) après le dernier événement de redimensionnement. Le paramètre uniqueId permet d'utiliser plusieurs rappels sans conflit.

Utilisation :

Pour utiliser cette fonction, vous pouvez modifier votre code comme suit :

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

En implémentant cette solution, vous pouvez vous assurer que votre code répond avec précision aux événements de redimensionnement de fenêtre, en s'exécutant uniquement une fois le redimensionnement terminé.

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!