Comment déclencher un événement de redimensionnement jQuery une seule fois une fois le redimensionnement terminé ?

Comment appeler l'événement de redimensionnement jQuery une seule fois une fois le redimensionnement terminé

Aperçu du problème

Lorsque vous utilisez l'événement resize de jQuery pour appeler une fonction, celui-ci peut être appelé à plusieurs reprises lorsque l'utilisateur redimensionne la fenêtre du navigateur. Le but est de déclencher la fonction une seule fois lorsque le redimensionnement est terminé.

Solution

Pour y parvenir, nous pouvons utiliser la fonction setTimeout et une variable timeout :

var timeout;
$(window).resize(function() {
  // Function to execute when resizing is complete
  timeout = setTimeout(function() {
    // Execute the desired function
  }, 30);
});

En définissant un timeout de 30 millisecondes, nous retardons l'exécution de la fonction jusqu'à ce que le redimensionnement soit arrêté pendant au moins 30 millisecondes. Cela garantit que la fonction n'est appelée qu'une seule fois.

Considérations supplémentaires

Si l'utilisateur lance une autre action de redimensionnement avant l'expiration du délai d'attente, le délai d'attente précédent sera effacé et un un nouveau sera défini. Cela garantit que la fonction n'est toujours exécutée qu'une seule fois après le redimensionnement final.

Attention : L'utilisation de variables globales, telles que le délai d'attente, doit être évitée si possible. Cependant, dans ce cas, l'utilisation d'une variable timeout est nécessaire pour maintenir l'état de gestion de l'événement.

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!