자바 스크립트 리스너의 실행 순서

Question

JavaScript (리스너) 메소드의 실행 순서와 관련하여 질문이 있습니다. 아래의 코드는 아마 모범 사례는 아니지만 btn1이 변경 될 때 아래 함수가 실행되는 순서를 보장 할 수있는 방법이 있습니까?

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

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

예 : JS 코드가 "실제 나타나는 js/html 파일에 나열"되어있는 순서에 따라이를 지정할 수 있습니까? #btn1이 변경 될 때 : 1. doStuff()가 먼저 실행됩니다. 2. doStuff()가 호출되기 전에 doStuff()가 완전히 완료 될 것입니다. doStuff가 수행중인 모든 작업이 DOM 업데이트라고 가정하면

doStuff가 DOM을 업데이트하고 doMoreStuff이 업데이트 된 DOM 값을 사용하여 dojore endpoint를 호출하는 실제 예제가 있습니다. - 그리고 doStuff가 항상 먼저 호출 될 것입니다. (처음으로 "목록에있는"드러난 디자인에 기반하여) 항상 호출됩니다.

덕분에, 데미안

지금까지 내가 알고 있어요으로

Answer 1

는, 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>

당신이 볼 수 있듯이, 두 번째가 시작되기 전에 첫 번째 완료.