Javascript退出正常执行顺序

Javascript exiting normal execution order

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

因此,当页面加载时,调试器遵循预期的行顺序: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));
    },
}

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

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

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