Comment déclencher une action uniquement une fois l'événement de redimensionnement terminé ?

Attendre la fin de l'événement « Redimensionner » pour déclencher une action

Souvent, lorsque l'on travaille avec un design réactif, il est souhaitable d'effectuer une action uniquement une fois le processus de redimensionnement complètement terminé. Cependant, la gestion traditionnelle des événements à l'aide de $(window).resize() peut déclencher plusieurs appels pendant le processus de redimensionnement, entraînant un comportement indésirable.

Solution : utiliser setTimeout() et clearTimeout()

Pour obtenir le comportement souhaité, une combinaison de setTimeout() et clearTimeout() peut être utilisée. Voici un exemple :

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

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

Cette approche utilise une minuterie pour retarder l'exécution de la fonction resizedw(). Lorsque l'événement de redimensionnement se produit, il efface toute minuterie existante et en démarre une nouvelle. Si le processus de redimensionnement se poursuit dans les 100 millisecondes, le minuteur est à nouveau réinitialisé. Ce n'est que lorsque le redimensionnement s'est arrêté pendant 100 millisecondes que la fonction resizedw() est invoquée.

Exemple sur jsfiddle :

Pour un exemple fonctionnel de cette solution, veuillez vous référer au lien jsfiddle fourni dans la réponse.

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!