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