SetTimeout 在 chrome 代碼片段中不起作用

Question

我正在谷歌瀏覽器中編寫一個代碼片段來聚合一些數據。

由於某種原因，我的超時不起作用，這是一個非常簡化的版本......

let element= document.querySelector(".element");
let link = element.querySelector("a");

link.click();

setTimeout(() => {
    console.log("waited");
},500);

console.log("waiting");

我的 output：

waiting
undefined
Navigated to http://127.0.0.1/page.html

我預期的 output 將是：

undefined
Navigated to http://127.0.0.1/page.html
waiting
waited

我也很奇怪 output 也會被反轉。

任何幫助將不勝感激謝謝！

Answer 1

在link.click()之后，真正瀏覽頁面需要很長時間。 由於 Javascript 的異步特性，將執行以下代碼行，直到真正的導航發生。 所以，

console.log("waiting");

將會發生。 但

setTimeout(() => {
    console.log("waited");
}, 500);

不會發生，因為真正的導航將在 500 毫秒之前發生。

在真正的導航之后，除非它到位，否則您的代碼將消失。

document.body.innerHTML = '' +
        '<div class="element">'+
        '    <a href="#"></a>' +
        '</div>'; 

let element= document.querySelector(".element");
let link = element.querySelector("a");

link.click();

setTimeout(() => {
    console.log("waited");
}, 500);

console.log("waiting");  

這個片段的日志是：

waiting
undefined
waited