ordre dans le déclenchement des événements et des fonctions

Question

Existe-t-il un moyen de l'exécuter dans cet ordre?

HTML:

<button type="button">Click!</button> 

JS:

window.addEventListener("hashchange", function() { 
    eventFunction(); 
}, false); 

document.querySelector('button').addEventListener('click', function() { 
    location.hash = "changed"; 
    otherFunction(); 
}); 

function eventFunction() { 
    console.log('first'); 
} 

function otherFunction() { 
    console.log('second'); 
} 

Voici jsFiddle: https://jsfiddle.net/texzj2uv/1/

Answer 1

Il suffit d'appeler otherFunction de manière asynchrone:

window.addEventListener("hashchange", function() { 
 
    eventFunction(); 
 
}, false); 
 

 
document.querySelector('button').addEventListener('click', function() { 
 
    location.hash = "changed"; 
 
    setTimeout(otherFunction, 0); 
 
}); 
 

 
function eventFunction() { 
 
    console.log('first'); 
 
} 
 

 
function otherFunction() { 
 
    console.log('second'); 
 
}

<button type="button"> 
 
Click! 
 
</button>

01 Ce qui se passe quand vous appelez le location.hash = "changed";, le navigateur pousse un gestionnaire d'événements dans la file d'attente et continue avec la pile d'appels. Si vous appelez otherFunction() tout de suite, il sera sur la pile des appels et sera appelé avant tout sur la file d'attente. L'appeler comme setTimeout(otherFunction, 0) le pousse dans la file d'attente derrière le gestionnaire d'événements.

Il y a une grande vidéo expliquant javascript boucle, pile d'appel et file d'attente: Philip Roberts: What the heck is the event loop anyway? | JSConf EU 2014

Answer 2

utilisation setTimeout ou setImmediate pour pousser le deuxième appel à la fin de l'exécution de Qué. Le problème est que l'événement est ajouté à la fin du courant, donc vous devez soit appeler la première fonction directement, soit pousser le deuxième code à la fin du que.

document.querySelector('button').addEventListener('click', function() { 
    location.hash = "changed"; 
    setTimeout(otherFunction); 
}); 

jsFiddle: https://jsfiddle.net/texzj2uv/2/

Il est probablement mieux de gérer les choses en fonction de ce que vous essayez de faire bien. Pouvez-vous poster plus d'info un POURQUOI vous avez besoin du code exécuté dans cet ordre?