這個javascript / Jquery代碼的執行順序是什么？

Question

好的，我是jquery和Javascript的新手。 我正在閱讀關於w3school的回調，它給出了兩個例子。

例1：

$("button").click(function(){
  $("p").hide("slow",function(){
    alert("The paragraph is now hidden");
  });
});

例2：

$("button").click(function(){
  $("p").hide(1000);
  alert("The paragraph is now hidden");
});

據我所知，在第一種情況下，只有在hide（）函數完成后才會執行警報。 但是在第二個示例中，可能會在隱藏完成之前執行警報。 這在我的理解中引起了一些混亂。 例如，在下面的情況下， alert('hey')可能會在它之前的警報（具有數學計算的警報alert('hey')之前執行。

$("button").click(function(){
  alert(1+2+(3*4)..blah..blah);
  alert('hey');
});

或者在這種情況下......

$("button").click(function(){
  fn1();
  fn2();
});

function fn1(){
    for(var i=0;i<100;i++){
 $('table').append(blah);
        }
}
function fn2(){
alert('hey');  
}

是否有可能在fn1完成追加之前出現“嘿”？ 如果是這樣，我需要寫每個東西作為回調？

Answer 1

回答你的問題：不。

關鍵是某些javascript函數是異步的 。 這些實際上只有兩個常見的類別：

1. XmlHttpRequest（即AJAX）調用，瀏覽器進入網絡以獲取某些內容，並且它允許腳本在收集響應時繼續運行。
2. 超時和間隔，您告訴瀏覽器在延遲后調用一些代碼。 腳本將繼續暢通無阻，然后，當時間到來時，超時代碼將運行。

在你的例子中：

$("p").hide("slow",function(){
   alert("The paragraph is now hidden");
});

jQuery中的hide函數是基於超時的。 因此，您的腳本不必等待動畫完成才能開始其業務。 jQuery提供了一個回調參數，因此您可以根據需要選擇在動畫完成后發生某些事情。

所以在這個例子中：

$("button").click(function(){
   $("p").hide(1000);
   alert("The paragraph is now hidden");
});

在隱藏完成之前說“可能”執行警報是錯誤的。 除非您的代碼執行速度太慢以至於要顯示警報需要超過1整秒，否則它將在隱藏完成之前執行。 1000ms是一個javascript線的永恆。

$("button").click(function(){
   alert(1+2+(3*4)..blah..blah);
   alert('hey');
});

在這個例子中，代碼沒有任何異步。 alert是一個所謂的blocking調用，這意味着在您關閉警報之前，腳本中沒有任何操作。 因此，您可以保證警報將按順序顯示，無論您制作參數的復雜程度如何。

事實上，參數的復雜性沒有影響，因為它會在結果字符串傳遞給alert函數之前完全評估。

總而言之，除非您正在執行Ajax， setTimeout和setInterval ，或者使用第三方庫（應記錄其行為），否則您的代碼將按順序執行。

Answer 2

在示例2中， alert()首先出現的原因是hide()調用是異步的。 hide()函數被觸發，但這有1000毫秒的延遲。 alert()之后立即觸發，而不是之后的1000毫秒，因此看起來alert()首先被觸發。

在示例1中， alert()僅在hide()完成時觸發，因為它使用回調函數。

Answer 3

不，這是不可能的，對於函數，JavaScript逐行執行但是一次性完成，但它在給出第二個結果后返回第一個結果！ 但是對於另一個例子，很明顯hide（）需要更長的時間來提供所請求的響應，而警報是一個內置於函數中的瀏覽器，這就是為什么警報似乎在hide（）之前工作，我不知道做這些事情的確切時間，但如果你谷歌它，你也可以學習它們，如果你需要！

BTW當一個alert（）彈出時，它會關閉整個javascript代碼，只是為了讓你知道。 ;）

Answer 4

在Javascript中使用alert或confirm時，瀏覽器被強制進入同步（現有或同時發生）進程，其中所有內容（甚至是加載另一頁）都會停止，直到用戶解除對話框為止。

因此，當您提醒某些內容時，瀏覽器將停止執行其他功能。

但是jQuery hide和其他動畫函數是異步的（不同時存在），因此瀏覽器將在不等待它們的情況下轉到下一行。

對於前者

$(document).ready(function(){
  fn1();
  fn2();
});

function fn1(){
    for(var i=0;i<100;i++){
 $('body').append("<div>blah</div>");
        console.log("blah!");
        }
}
function fn2(){
console.log("Hey!");
}

在瀏覽器等待f1()完成時，將在blah （100次）后記錄hey 。

---

DEMO

---

但如果你嘗試這樣的事情：

$("p").hide("slow",function(){
    // This is the call back function and not others.
  });

然后alert將顯示其工作方式。

在jQuery中：

 $("p").hide("slow",function(){ // This is the call back function and not others. }); 

當任何異步或同步功能首先執行其任務時，將執行回調。