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="/"。
所以我会附上我的简化代码。
因此,当页面加载时,调试器遵循预期的行顺序: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="/"。