Question

有没有办法按此顺序执行？

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');
}

这里是jsfiddle：https://jsfiddle.net/texzj2uv/1/

Answer 1

使用setTimeout或setImmediate将第二次调用推送到执行que的末尾。问题是事件被添加到当前que的末尾，因此您需要直接调用第一个函数，或者将第二个代码执行推送到que的末尾。

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

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

根据你想要做的事情，处理事情可能会更好。你能发布更多信息吗？为什么你需要按顺序执行代码？

Answer 2

只需异步调用otherFunction：

＆＃13;

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');
}

＆＃13;

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

＆＃13;

当您调用location.hash = "changed";时，浏览器会推送队列上的事件处理程序，然后继续调用堆栈。如果你立即调用otherFunction()，它将在调用堆栈上，并将在队列中的任何内容之前调用。像setTimeout(otherFunction, 0)这样调用它会将它推送到事件处理程序后面的队列中。

有一个很棒的视频解释了javascript循环，调用堆栈和队列：Philip Roberts: What the heck is the event loop anyway? | JSConf EU 2014

触发事件和功能的顺序

2 个答案: