SetTimeout not working in chrome snippets

Question

I'm writing a code snippet in google chrome to aggregate some data.

For some reason my timeout isn't working, here's a very simplified vers...

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

link.click();

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

console.log("waiting");

My output:

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

My expected output would be:

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

It's also strange to me that the output would be reversed as well.

Any help would be appreciated thanks!

Answer 1

After link.click() , it takes a long time to really navigate the page. Due to asynchronous nature of Javascript, following lines of code will be executed until the real navigation takes place. So,

console.log("waiting");

will take place. But

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

will not take place because the real navigation will occur before 500ms.

After the real navigation, your codes will be gone unless it takes in place.

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");  

The log of this snippet is:

waiting
undefined
waited