JavaScript監聽器的執行順序

我有一個關於JavaScript（監聽器）方法執行順序的問題。雖然我很欣賞下面的代碼可能不是最佳實踐，但有什麼方法可以保證在btn1更改時下面的函數會觸發命令？JavaScript監聽器的執行順序

$(function() { 
    $('#btn1').change(function(){ 
      doStuff(); 
    }); 
    }); 

    $(function() { 
    $(#btn1, btn2).change(function(){ 
      doMoreStuff(); 
    }); 
    });

例如，是否有可能斷言根據JS代碼「出現在」的順序（即列在實際的js/html文件中），（當＃btn1改變時）： 1. doStuff（）將首先執行 2。 doStuff（）將在調用doMoreStuff（）之前完全完成 - 假設所有doStuff正在更新DOM

我有一個真實的例子，其中doStuff更新DOM，doMoreStuff使用更新的DOM值調用Ajax端點 - 並且要確保doStuff總是首先被調用（再次基於它首先被「列出」的片狀設計）。

感謝，達明

來源

2014-10-17 Damo

據我所知，jQuery的保證在其創建的順序事件處理火災（先入先出）。目前我無法找到任何有關這方面的文件，但我確定我曾經在某處讀過。

只要您的第一個change函數不是異步的，就應該是第一個函數在第二個函數啓動之前完成執行的情況。我們可以通過我們的第一個change功能中加入了循環測試：

$(function() { 
 
    $('#btn1').change(function(){ 
 
    console.log("First change event triggered at " + +(new Date())); 
 
    
 
    for (var i = 0; i < 100000000; i++) 
 
     continue; 
 
    
 
    console.log("First change event finished at " + +(new Date())); 
 
    }); 
 
}); 
 

 
$(function() { 
 
    $('#btn1, #btn2').change(function(){ 
 
    console.log("Second change event triggered at " + +(new Date())); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<select id="btn1"><option>1</option><option>2</option></select> 
 
<select id="btn2"><option>1</option><option>2</option></select>

正如你所看到的，第二次開始前第一個結束。

來源

2014-10-17 13:32:52

據我所知，事件監聽器被添加到隊列中，所以當監聽事件發生時，它們將按照它們被聲明的順序被調用。 – 2014-10-17 13:45:59

重要的是要注意，雖然該事件冒泡會影響訂單。在這種情況下，當然不會有事件冒泡。 – 2014-10-17 14:36:49

「只要你的第一個改變功能不是異步的」，它不是。雖然「second」聲明的函數確實會調用Ajax。很想獲得你提到的那個文檔。這段代碼是prod代碼的代表，其中Ajax調用的系統日誌記錄意味着第一個函數尚未完成。 – Damo 2014-10-17 14:49:05

JavaScript監聽器的執行順序

回答

相關問題