연쇄 javascript 함수

Question

한 시간 이상 동안이 주제를 검색했는데 광산 사례를 찾을 수 없습니다.

Ruby on Rails에서 개발 한 웹 응용 프로그램이 있습니다. 액션을 실행하기위한 여러 필드와 버튼이있는 폼을 기반으로합니다. Field1이 변경되면 JS 함수 function1()을 실행 한 다음 function2()를 실행하고 function3()을 실행하려고합니다. Field2가 변경되면 JS 함수 function2()를 실행 한 다음 function3()을 실행하려고합니다. Field3이 변경되면 JS 함수 function3()을 실행하려고합니다.

이 JS 함수는 모두 내 컨트롤러에 정의 된 특정 동작을 호출하며 AJAX를 사용하여 양식을 업데이트합니다. function2()는 function1()이 폼을 업데이트 한 후에 만 ​​실행되기를 원합니다. 그렇지 않으면 결과가 틀립니다.

이러한 함수에 의해 호출되는 컨트롤러 메서드는 Google 지오 코드 또는 Google 표준 시간대와 같은 다른 많은 웹 사이트에 API 호출을 보내므로 응답 시간이 예측할 수 없으며 몇 분의 1 초에서 몇 초까지 걸릴 수 있습니다.

나는이 시도 :

onchange="function1();function2();function3()" 

을하지만, 기능 2가() 기능 2와 관련하여() AJAX를 통해 업데이트 및 기능 3 (에 대해 동일한 문제를 완료) 기능 1 전에 실행하기 시작했기 때문에 그 (작동하지 않았다).

나는 또한 시도 :

onchange="function1();setTimeout(function(){function2();setTimeout(function(){function3()},FUNCTION2_DELAY)},FUNCTION1_DELAY)" 

그러나 그것은 작동하지 않았다 중 하나 FUNCTION1_DELAY이 너무 오래 설정되어 있기 때문에 경우, 기능 2가() FUNCTION1_DELAY이 만료되기 전에보다 빠르게 실행할 수있다() 기능 1 반면, 실행이 시작되지 않습니다 FUNCTION1_DELAY이고 FUNCTION1_DELAY가 너무 짧으면 function2()가 function2()가 실행하는 데 필요한 업데이트를 완료하기 전에 function2()가 실행을 시작합니다. function2()와 관련하여 function3()도 마찬가지입니다.

제 질문은 : function2()가 function1()이 AJAX를 통해 양식을 업데이트하고 function2()와 관련하여 function3()에 대해 동일한 작업을 수행하는 경우에만 더 똑똑한 방법을 실행하게 할 수 있습니까? function1(), function2() 및 function3()을 new_function1(), ... 등으로 병합하는 것과 같이 이러한 함수를 병합하는 새 컨트롤러 메서드를 만들 수 있음을 알고 있지만 반복적 인 동작이 포함 된 코드는 궁극적으로 유지하기가 더 어렵게 만듭니다. 그래서 나는이 문제를 다루는 더 똑똑한 방법을 찾고 싶습니다.

Answer 1

약속을 사용해야합니다.

은 기본적으로 그것은 그런 식으로 작동합니다

var MyFunction1 = new Promise(
    function() { 
     //do stuff here 
    } 
); 

MyFunction1.then(Myfunction2 ...).then(Myfunction3 ...; 

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise http://api.jquery.com/promise/

Answer 2

setTimeout가 비동기, 즉 작동하지 않도록. 함수 1의 끝에서 함수 2를 호출 할 수 있지만 여전히 함수 내부에 있습니다.유사 기능 3 : 또는

function one(){ 
    ...logic... 
    function two(); 
} 

function two(){ 
    ...logic... 
    function three(); 
} 

function three(){ 
    ...logic... 
} 

, 당신은 기능의 큐의 어떤 종류를 만들 수 있고, 현재이 완료되는 경우에만 다음으로 이동 :

또한 약속을 사용할 수 있습니다

var functionQueue = [ 
    one, 
    two, 
    three 
]; 

function next(){ 
    var nextFn = functionQueue.shift(); 
    if(nextFn){ 
    nextFn(); 
    } 
} 

function one(){ 
    ...logic... 
    next(); 
} 
// same for two & three 

, 이 코드는 매우 강력하고 코드를 더 명확하게 읽을 수 있지만이 문제는 과도 할 수 있습니다.