Javascript退出正常执行顺序

Question

所以我会附上我的简化代码。

因此，当页面加载时，调试器遵循预期的行顺序：27->9->10

当我点击topNewsButton时，执行顺序应该是17->18

但实际顺序是：17->27->9->10.

希望有人能帮助我。谢谢

7.  let dom = {
8.      init: function () {
9.         dataHandler.getData("https://api.hnpwa.com/v0/news/1.json", (response) => {
10.             dom.upload(response);
11.         })
12.         let topNewsButton = document.querySelector('#top-news');
13.         topNewsButton.addEventListener('click', dom.loadNews);
14.     },
15. 
16.     loadNews: function () {
17.         dataHandler.getData("https://api.hnpwa.com/v0/news/1.json", (response) => {
18.             dom.upload(response);
19.         })
20.     },
21. 
22.     upload: function (datas) {
23.         
24.     },
25. };
26. 
27. dom.init();

因为它在第 9、10 行上运行顺利，我不明白为什么它在第 17、18 行上不起作用。而且这两行完全相同。

第 18 行永远不会执行。所以我尝试用 alert("abc"); 替换第 18 行；而且没有警报。单击 topNewsButton 后，应该只执行 loadNews() 函数，不是吗？那么17->27的顺序怎么可能呢？

这里是getData函数

export let dataHandler = {
    getData: function (url, callback) {
        fetch(url, {
            method: 'GET',
            credentials: 'same-origin'
        })
            .then(response => response.json())
            .then(json_response => callback(json_response));
    },
}

Answer 1

代码按此顺序执行，因为请求需要时间才能获得响应，并且只有在收到响应后才会调用回调。

因此，在第 17 行，您发出了一个请求。第 18 行（回调）尚未执行，因为请求刚刚发送，因此还没有响应。然后你在第27行调用了init函数。init函数的第一行是9，你又发出了一个请求。无论出于何种原因，该请求首先得到响应，因此它首先在第 10 行调用其回调函数。最终，当第 17 行请求得到响应时，它将在第 18 行调用其回调。

Answer 2

实际上问题是我在 topNewsButton 的 HTML 中留下了一个 href="/"。

Javascript退出正常执行顺序

Javascript exiting normal execution order

javascript

api

json

execution