當一個事件被觸發並且頁面更新同時發生時會發生什麼？

鑑於我有HTML這樣的：當一個事件被觸發並且頁面更新同時發生時會發生什麼？

<a id="google" href="http://google.com">Google.com</a>

和JavaScript這樣的：

$('#google').on('click', function (e) { 
    console.log("Click Click Bang Bang!"); 
});

當我點擊我的google鏈接時，click事件觸發和頁面立即加載下一個環節...

如果在點擊事件結束之前加載目標網址（google.com），會發生什麼情況？如果事件只是觸發並完成，而不考慮可視頁面更新/更改URL /等，那真是太棒了！但如果不是這種情況，你如何確保你的事件完成？

謝謝！

來源

2014-01-29 user3084728

console.log是synchronous調用，頁面在點擊事件完成後被重定向。如果您有asynchronous致電click事件，那麼您必須注意，在離開頁面之前您必須等待響應。

來源

2014-01-29 04:42:33 Adil

感謝您的回答。我的問題的最後部分說：你如何確保你的點擊事件運行完成？有沒有這樣做的首選方法？謝謝！ – user3084728

@ user3084728它會一直運行，然後你得到重定向 –

這取決於，如果你沒有asnc調用，然後點擊事件將在打開鏈接之前完成。 – Adil

還有一點（很多）比這更符合眼球。

首先，你應該真正理解事件冒泡。
也就是說，只要<a>元素找到「點擊」事件，就已經設置了「點擊」事件處理程序。

這意味着無論處理程序給予該對象將在元素告訴它的父項（它將告訴它們的父項，直到你到達頁面的頂部）之前運行。
切換頁面發生在根元素（<html>或document.documentElement）。

所以在同情況下，a.onclick = function() { };總是將window.onclick = function() { };處理程序之前發生，因爲冒泡的。

無論其，僅開始劃傷表面...

如果您運行的異步操作的點擊處理程序裏面，這是一個鏈接的點擊，瀏覽器將改變頁面，那麼一旦瀏覽器到達"unload"階段（以後會更多），所有異步的東西（服務器調用/圖像加載/腳本加載/等）將被忽略（或取消）。

你要麼需要同步你在做什麼（保存到document.cookie或localStorage，而不是使AJAX調用，等等），或手動防止<a>從告訴它的父母發生了什麼事，在事件對象上使用.stopPropagation() ，它被傳遞給事件處理程序。

當然，現在，它並沒有告訴其母公司，它永遠不會達到window，所以頁面永遠不會改變......

...所以現在，在您的處理程序，如果你想頁面進行更改，在完成異步工作後，必須通過設置window.location = googleEl.href;手動進行頁面更改，並且在確定完成所有異步工作後執行此操作。

...當然，這不是它的結束......當瀏覽器要更改的頁面，這也觸發一個事件"beforeunload"和"unload"事件時，可以從window聽。再次，相同的異步規則適用...
而爲了讓事情變得更加混亂，只有大多數瀏覽器會觸發"beforeunload"，有些人不會打擾。

因此，要回答你的問題相關：
的點擊處理程序便會啓動，然後再幾個事件之間，然後"beforeunload"，然後"unload"，那麼頁面的變化。

來源

2014-01-29 04:56:12 Norguard

我會建議點擊後通過錨重定向。因此：

$('#google').on('click', function (e) { 
    console.log("Click Click Bang Bang!"); 
    //This would stop from redirecting 
    e.preventDefault(); 
    //This will take you to Google after completing the above task 
    window.location.reload = "http://google.com"; 
});

來源

2014-01-29 05:05:30 Makrand

爲什麼？你能解釋你的推理嗎？ – user3084728

@ user3084728當然。我把e.preventDefault（）;的原因;是停止執行鏈接，以便您可以執行所有您想要的操作，然後在點擊完成後將控件引導至所需的網站。 – Makrand

當一個事件被觸發並且頁面更新同時發生時會發生什麼？

回答

相關問題