Comment appeler l'événement RESIZE de JQuery uniquement une fois le redimensionnement terminé ?

Utilisation de JQuery pour appeler l'événement RESIZE une fois le redimensionnement terminé

Lors du développement d'applications réactives, il est souvent nécessaire de suivre les modifications de la taille de la fenêtre du navigateur pour ajuster la Interface utilisateur en conséquence. Cependant, appeler continuellement une fonction de redimensionnement pendant que la fenêtre est redimensionnée manuellement peut conduire à des appels de fonction excessifs.

Pour résoudre ce problème, JQuery fournit un moyen d'appeler la fonction de redimensionnement une seule fois une fois le redimensionnement de la fenêtre terminé.

Solution utilisant setTimeout()

Dans l'écouteur d'événement de redimensionnement de JQuery, utilisez une fonction setTimeout() pour appeler l'action souhaitée avec un délai spécifié. Cela garantit que la fonction n'est appelée qu'après l'arrêt du redimensionnement.

$(window).resize(function() {
  if (this.resizeTO) clearTimeout(this.resizeTO);
  this.resizeTO = setTimeout(function() {
    $(this).trigger('resizeEnd');
  }, 300);
});

$(window).on('resizeEnd', function() {
  // Code to be executed after resizing is complete
});

Dans cette solution, un événement personnalisé resizeEnd est déclenché après un délai de 300 ms, garantissant qu'il ne se produit qu'une fois le redimensionnement terminé.

Autre solution utilisant setInterval()

Alternativement, vous pouvez utiliser setInterval() pour vérifier en permanence si la taille de la fenêtre a changé. Lorsque la taille reste stable pendant une durée spécifiée, la fonction de redimensionnement est appelée.

var resizeInterval;
window.onresize = function() {
  if (resizeInterval) clearInterval(resizeInterval);
  resizeInterval = setInterval(function() {
    if (window.innerWidth == previousWidth && window.innerHeight == previousHeight) {
      clearInterval(resizeInterval);
      // Code to be executed after resizing is complete
    }
  }, 300);
  previousWidth = window.innerWidth;
  previousHeight = window.innerHeight;
};

Dans les deux solutions, la valeur du délai peut être ajustée en fonction des exigences de l'application.

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!