我的代碼停止工作時，我刪除「警報（）」

Question

我有一個非常奇怪的（對我來說）JavaScript問題。我正在開發一個頁面，並在這樣做的過程中，我投入了幾行警告代碼來幫助我進行調試。然後，我得到了一切工作。嗚呼，對吧？沒那麼快。只要我拿出警報（代碼沒有其他更改），我的代碼就會失敗。該變量返回爲未定義。沒有合乎邏輯的理由，我可以想出會導致這種情況。有人有主意嗎？這裏是相關代碼...下面的工程，但當然彈出警報：

function videoDone() { 
$.ajax({url:"getNextTrack.php",success:function(result){ 

    foo = result; 
    }}); 
    alert(foo); 
    document.getElementById("myVideo").src = foo; 

上面的代碼工作正常。它通過jquery ajax加載下一個軌道，並設置視頻源。快樂的時光。然而，如果我什麼也不做，但刪除警報並將代碼更改爲：

function videoDone() { 
$.ajax({url:"getNextTrack.php",success:function(result){ 

    foo = result; 
    }}); 

    document.getElementById("myVideo").src = foo; 

然後foo回來undefined。這對我來說沒有意義。沒有其他任何更改

Answer 1

在腳本中，代碼創建了一個Ajax調用，這是一個異步調用，這意味着您的代碼在調用時繼續執行。在代碼中，document.getElementById...行依賴於Ajax調用返回的數據。當警報沒有到位時，在ajax調用完成之前調用document.getElementBy..語句。

當到位時，警報將暫停足夠長的呼叫以完成ajax呼叫。當您刪除警報時，調用來獲取元素並設置src屬性在Ajax調用返回之前執行。這導致foo未定義。

只需包含在ajax調用完成後執行的回調函數內設置src屬性的代碼即可。

function videoDone() { 
$.ajax({url:"getNextTrack.php",success:function(result){ 
    document.getElementById("myVideo").src = result; 
}}); 

在這裏簡單地說是發生了什麼：

不使用警報

1. Ajax調用火災
2. 的document.getElementById ......執行，拋出錯誤
3. Ajax調用返回

隨着警報

1. Ajax調用火災
2. 告警窗口，暫停代碼執行
3. Ajax調用返回填充所需變量
4. 的document.getElementById執行... ，無錯誤

Answer 2

Ajax調用是異步的，所以代碼將繼續執行。所以在你的第一個例子中，foo有時間由「結果」設置，但在你的第二個例子中，它沒有直接設置.src。

試試這個：

function videoDone() { 
$.ajax({url:"getNextTrack.php",success:function(result){ 

    foo = result; 
    document.getElementById("myVideo").src = foo; 
}});