Javascript Girl
  1. Javascript Girl
  3. Les gestionnaires d'événements JS peuvent-ils interrompre l'exécution d'un autre gestionnaire?
Intereting Posts
Comment imprimer des clés et des valeurs dans Meteor Template? Texte fixe dans la zone de texte à l'aide de css et js Comment accéder aux éléments iframe parent d'une page javascript enfant? Comment extraire le texte de Link en Javascript? Chargez javascript async, puis vérifiez DOM chargé avant d'exécuter le rappel Remplacer toutes les occurrences d'une chaîne dans un élément Pourquoi ne reçois-je pas la valeur de onChange avec Select? JQuery Plugin "readmore", texte d'ajustement sans mots de coupe Pour afficher à nouveau la page Web, le navigateur doit renvoyer l'information Configurez le webpack pour permettre le débogage du navigateur Javascript: setAttribute () vs element.attribute = valeur pour définir l'attribut "name" JQuery survolent l'événement sur la balise <a> sur les appareils mobiles Dessine une belle courbe de Bezier à travers des points aléatoires Plugin personnalisé Phonegap 3.0 Des fuites de mémoire de directive angulaire?

Les gestionnaires d'événements JS peuvent-ils interrompre l'exécution d'un autre gestionnaire?

J'ai le problème suivant. J'ai créé une classe dans le constructeur dont je charge plusieurs images et je dois retarder les initialisations restantes jusqu'à ce qu'elles soient complètement chargées. Le code que j'ai utilisé est le suivant (un extrait du constructeur): 

var self = this; var imagesToLoad = 4; var finishInit = function() { alert(imagesToLoad); imagesToLoad--; if (imagesToLoad == 0) { // remaining initializations } } this._prevIcon = new Image(); this._prevIcon.onload = finishInit; this._prevIcon.src = "img1.png"; this._nextIcon = new Image(); this._nextIcon.onload = finishInit; this._nextIcon.src = "img2.png"; this._pauseIcon = new Image(); this._pauseIcon.onload = finishInit; this._pauseIcon.src = "img3.png"; this._playIcon = new Image(); this._playIcon.onload = finishInit; this._playIcon.src = "img4.png";

À ma grande surprise, lors de l'exécution, les boîtes de dialogue affichées sont 4,4,4,4 dans Firefox 7 et 4,3,2,4 dans IE 9. Je suis confus parce que je croyais que JS est un simple thread et donc un gestionnaire d'événements Ne devrait pas interrompre un autre. Où est la capture (ou mon erreur)?

Merci d'avance. Cordialement, Tomek

Tous les gestionnaires d'événements JS sont simples. On ne commencera pas avant la fin de la précédente. Tout fonctionne dans une file d'attente d'événements. Lorsqu'un événement se termine, le moteur JS cherche s'il y a un autre événement dans la file d'attente et, si c'est le cas, commence l'exécution de cet événement.

Par exemple, lorsqu'un horloge se déclenche indiquant qu'il est temps d'un événement de minuterie, il met l'événement dans la file d'attente et le code de cet événement de la minuterie se déclenche lorsque l'événement JS en cours d'exécution est terminé et que l'événement de la minuterie arrive au sommet de la file d'attente .

Consultez cette publication pour une discussion plus poussée sur la file d'attente des événements Javascript.

Les images sont chargées en arrière-plan en utilisant des réseaux OS natifs. Plusieurs images peuvent être chargées à la fois. .onload() gestionnaires de .onload() ne tirent que l'un à la fois, mais comme les images sont chargées simultanément, il n'y a aucune garantie d'ordre de chargement dans un code comme vous l'avez fait. De plus, les alertes peuvent influencer le timing car elles bloquent l'exécution de javascript, mais ne bloquent pas l'exécution du chargement d'image.

Je ne comprends pas non plus la séquence 4,4,4,4 ou 4,3,2,4. Ils doivent tous deux montrer 4,3,2,1. Vous devriez nous montrer une version entièrement fonctionnelle du code pour savoir ce qui en provoque. Je suppose que vous avez des problèmes de portée avec vos variables qui tiennent compte du nombre de commandes de votre code que vous avez divulguées dans votre question.

Vous pouvez voir une version opérationnelle de ce type de code ici: http://jsfiddle.net/jfriend00/Bq4g3/ .