Comment empêcher plusieurs déclencheurs d'événements de « redimensionnement » en JavaScript ?

Gestion de plusieurs déclenchements d'événements « redimensionnement »

Les développeurs rencontrent souvent le problème de la gestion de plusieurs déclencheurs de l'événement « redimensionnement » pendant le processus de redimensionnement. Cela peut conduire à des comportements indésirables ou à une inefficacité. Comprendre comment attendre la « fin » de l'événement « resize » est crucial pour garantir que seule l'action souhaitée est exécutée une seule fois.

Une approche courante, comme le démontre l'exemple de code donné, consiste à utiliser le $ (window).resize(function(){resizedw();}) méthode. Cependant, cette méthode déclenche la fonction resizedw() plusieurs fois au cours du processus de redimensionnement en cours.

Pour surmonter cela, nous pouvons exploiter les méthodes setTimeout() et clearTimeout(). Cette stratégie nous permet de définir un délai avant de déclencher la fonction resizedw(). En définissant un délai d'attente de, par exemple, 100 ms, nous pouvons attendre un temps spécifique pour nous assurer que le redimensionnement est terminé. Pendant ce délai, tout nouvel événement de redimensionnement « réinitialisera » le minuteur, garantissant qu'il ne s'exécutera qu'une fois le processus de redimensionnement réellement terminé.

Voici un exemple de code pour illustrer cette approche :

function resizedw(){
    // Haven't resized in 100ms!
}

var doit;
window.onresize = function(){
  clearTimeout(doit);
  doit = setTimeout(resizedw, 100);
};

Cet exemple de code peut être trouvé sur jsfiddle pour votre commodité.

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!