Comment exécuter des actions uniquement une fois une opération de redimensionnement terminée ?

Attendre la « fin » de l'événement « redimensionner » pour une exécution optimale de l'action

Dans la programmation événementielle, il est courant de gérer la taille modifications à l'aide de l'événement 'resize', généralement attribué à une fenêtre ou à un autre élément redimensionnable. Cependant, lorsque des opérations de redimensionnement se produisent, l'événement « resize » est déclenché plusieurs fois au cours du processus, conduisant à une exécution redondante de votre gestionnaire d'événements.

Capturer la « fin » d'un événement « resize »

Pour résoudre ce problème et exécuter une action uniquement lorsque le redimensionnement est terminé, nous pouvons utiliser une technique qui implique l'utilisation de 'setTimeout()' et 'clearTimeout()'.

Solution :

Créez une fonction, 'resizedw()', qui vous servira de gestionnaire d'événements pour l'action de redimensionnement.

function resizedw() {
  // Your action to be performed when resizing finishes
}

Déclarez une variable, 'doit' et initialisez-le comme 'null'. Cette variable contiendra l'identifiant de délai d'attente renvoyé par 'setTimeout()'.

var doit = null;

Attachez l'écouteur d'événement à l'événement 'onresize' de l'objet 'window'.

window.onresize = function() {

Utilisez 'clearTimeout()' pour annuler toute demande de délai d'attente en attente associée à la variable 'doit'.

  clearTimeout(doit);

Attribuez le résultat de 'setTimeout()' à la variable 'doit'. Cela planifiera l'exécution de 'resizedw()' après un délai de 100 millisecondes.

  doit = setTimeout(resizedw, 100);
};

Lorsque l'opération de redimensionnement se terminera, le gestionnaire d'événements 'onresize' sera invoqué sans déclencher immédiatement 'resizedw()'. . Après le délai désigné (100 millisecondes), 'resizedw()' s'exécutera, marquant la fin du processus de redimensionnement.

Exemple de code :

Le code suivant démontre la mise en œuvre de cette approche :

function resizedw() {
  // Your action to be performed when resizing finishes
  console.log('Resizing finished!');
}

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

Cette solution gère efficacement l'événement 'resize' en empêchant l'action associée de s'exécuter pendant le processus de redimensionnement. Au lieu de cela, l'action n'est déclenchée qu'une fois l'opération de redimensionnement terminée.

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!