在控制臺輸入alert 不要括號 自己寫的就能看到代碼 原生的只會看到native code

你是不是開著控制臺進(jìn)行測試的，剛剛用chrome測試了一下，如果開著控制臺并且控制臺取得了焦點，alert不會立即阻塞正在運(yùn)行的線程，得等到焦點從控制臺重新回到頁面才會發(fā)出alert并阻塞線程；但如果在執(zhí)行alert之后立即修改window.location.href，此時控制臺又取得了焦點，則alert不會立即阻塞線程，jvm轉(zhuǎn)而執(zhí)行下一個語句修改window.location.href，而這將導(dǎo)致之前尚未發(fā)出的alert被取消（我猜的）。

結(jié)論是，不要開著控制臺測試這段代碼。

以下是我的測試代碼：

setTimeout(() => $.ajax({

    url: '/',

    type: 'GET',

    success: data => {

        console.log('Before rua');

        alert('Rua!');

        console.log('After rua');

        window.location.href += '#';

    },

    error: (...args) => console.log(...args)

}), 1000);

如果你在1秒內(nèi)沒有將焦點切回頁面，則alert不會發(fā)出，且window.location.href將被立刻修改；若你在1秒內(nèi)將焦點切回頁面，則alert發(fā)出，且window.location.href將會在你將alert dismiss掉后被修改。

或者更簡單粗暴一點：

setTimeout(() => {

    console.log('Before rua');

    alert('Rua!');

    console.log('After rua');

    window.location.href += '#';

}, 1000);

同上，1秒內(nèi)切回頁面就能看到alert，dismiss后window.location.href才會被修改，反之a(chǎn)lert會被取消。

與上述代碼之對比：

setTimeout(() => {

    console.log('Before rua');

    alert('Rua!');

    console.log('After rua');

    // window.location.href += '#';

}, 1000);

這里只是發(fā)出一個alert，并沒有修改window.location.href，在控制臺輸入上述代碼并運(yùn)行后等待一秒，看到控制臺輸出了“Before rua”和“After rua”，這時再將焦點切回頁面，才會看到一個alert彈出。

綜上，我猜測alert其實也可以是異步的——當(dāng)渲染進(jìn)程檢測到當(dāng)前頁面沒有獲取到焦點時，比如被用戶最小化了，此時若頁面中嵌入的js試圖發(fā)出alert，則渲染進(jìn)程不會立刻彈出alert，而是將請求放入一個隊列中（pending），等待下一次獲取焦點時再一一彈出。

補(bǔ)充一下，目前使用chrome測試的結(jié)果是只有在焦點被控制臺獲取時發(fā)出alert，并且在alert之后修改了window.location.href（焦點仍在控制臺），才會把a(bǔ)lert直接取消掉。最小化瀏覽器的話瀏覽器會自動跳出來發(fā)出alert。

你可以自己實現(xiàn)個alert，當(dāng)點擊確定之后在進(jìn)行跳轉(zhuǎn)操作

alert停止當(dāng)前操作，確認(rèn)后還是會執(zhí)行下面語句