이전 기능이 완료된 후 기능 호출

다음 JavaScript 코드가 있습니다.

$('a.button').click(function(){
    if (condition == 'true'){
        function1(someVariable);
        function2(someOtherVariable);
    }
    else {
        doThis(someVariable);
    }
});

완료된 function2후에 만 호출 되도록하려면 어떻게해야 function1합니까?

익명 콜백을 지정하고 function1이이를 수락하도록하십시오.

$('a.button').click(function(){
    if (condition == 'true'){
        function1(someVariable, function() {
          function2(someOtherVariable);
        });
    }
    else {
        doThis(someVariable);
    }
});


function function1(param, callback) {
  ...do stuff
  callback();
} 

jQuery 1.5를 사용하는 경우 새로운 Deferreds 패턴을 사용할 수 있습니다.

$('a.button').click(function(){
    if(condition == 'true'){
        $.when(function1()).then(function2());
    }
    else {
        doThis(someVariable);
    }
});

편집 : 업데이트 된 블로그 링크 :

Rebecca Murphy는 여기에 큰 글씨를 썼습니다 : http://rmurphey.com/blog/2010/12/25/deferreds-coming-to-jquery/

이 시도 :

function method1(){
   // some code

}

function method2(){
   // some code
}

$.ajax({
   url:method1(),
   success:function(){
   method2();
}
})

이 답변은 표준 promises의 JavaScript 기능인을 사용합니다 ECMAScript 6. 대상 플랫폼이 지원하지 않으면 promisesPromiseJs로 폴리 필하십시오 .

약속은 JavaScript에서 비동기 작업을 처리하는 새롭고 훨씬 나은 방법입니다.

$('a.button').click(function(){
    if (condition == 'true'){
        function1(someVariable).then(function() {
            //this function is executed after function1
            function2(someOtherVariable);
        });
    }
    else {
        doThis(someVariable);
    }
});


function function1(param, callback) {
    return new Promise(function (fulfill, reject){
        //do stuff
        fulfill(result); //if the action succeeded
        reject(error); //if the action did not succeed
    });
} 

이 간단한 예제에서는 상당한 오버 헤드처럼 보일 수 있지만 복잡한 코드의 경우 콜백을 사용하는 것보다 훨씬 낫습니다. 여러 then명령문을 사용하여 여러 비동기 호출을 쉽게 연결할 수 있습니다 .

function1(someVariable).then(function() {
    function2(someOtherVariable);
}).then(function() {
    function3();
});

또한 jQuery 지연을 쉽게 랩핑하여 $.ajax호출 에서 리턴 할 수 있습니다 .

Promise.resolve($.ajax(...params...)).then(function(result) {
    //whatever you want to do after the request
});

@charlietfl이 지적했듯이,에 jqXHR의해 반환 된 객체 $.ajax()는 Promise인터페이스 를 구현합니다 . 실제로 실제로 랩핑 할 필요는 없으며 Promise직접 사용할 수 있습니다.

$.ajax(...params...).then(function(result) {
    //whatever you want to do after the request
});

또는 하나의 함수가 완료되면 사용자 지정 이벤트를 트리거 한 다음 문서에 바인딩 할 수 있습니다.

function a() {
    // first function code here
    $(document).trigger('function_a_complete');
}

function b() {
    // second function code here
}

$(document).bind('function_a_complete', b);

이 방법을 사용하면 기능 a는 실행이 완료된 경우에만 트리거가 존재하므로 기능 'b'는 AFTER 기능 'a'만 실행할 수 있습니다.

당신은 이렇게 할 수 있습니다

$.when(funtion1()).then(function(){
    funtion2();
})

이것은 function1이 수행하는 작업에 따라 다릅니다.

function1이 div 값이나 다른 것을 업데이트하는 것과 같은 간단한 동기화 자바 스크립트를 수행하는 경우 function1이 완료된 후 function2가 시작됩니다.

function1이 AJAX 호출과 같은 비동기 호출을 수행하는 경우 "콜백"메소드를 작성해야합니다 (대부분의 ajax API에는 콜백 함수 매개 변수가 있음). 그런 다음 콜백에서 function2를 호출하십시오. 예 :

function1()
{
  new AjaxCall(ajaxOptions, MyCallback);
}

function MyCallback(result)
{
  function2(result);
}

방법 1, 방법 2, 3, 4 이후에 방법 1을 실행해야하는 경우 다음 코드 스 니펫은 JavaScript의 Deferred 오브젝트를 사용하여이를위한 솔루션이 될 수 있습니다.

function method1(){
  var dfd = new $.Deferred();
     setTimeout(function(){
     console.log("Inside Method - 1"); 
     method2(dfd);	 
    }, 5000);
  return dfd.promise();
}

function method2(dfd){
  setTimeout(function(){
   console.log("Inside Method - 2"); 
   method3(dfd);	
  }, 3000);
}

function method3(dfd){
  setTimeout(function(){
   console.log("Inside Method - 3"); 	
   dfd.resolve();
  }, 3000);
}

function method4(){   
   console.log("Inside Method - 4"); 	
}

var call = method1();

$.when(call).then(function(cb){
  method4();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

function1이 완료하는 데 시간이 걸리기 때문에 비동기로 바꾸려는 동기화 함수이고 콜백을 추가하도록 제어 할 수없는 경우 :

function function1 (someVariable) {
    var date = Date.now ();
    while (Date.now () - date < 2000);      // function1 takes some time to complete
    console.log (someVariable);
}
function function2 (someVariable) {
    console.log (someVariable);
}
function onClick () {
    window.setTimeout (() => { function1 ("This is function1"); }, 0);
    window.setTimeout (() => { function2 ("This is function2"); }, 0);
    console.log ("Click handled");  // To show that the function will return before both functions are executed
}
onClick ();

출력은 다음과 같습니다.

Click handled

... 2 초 후 :

This is function 1
This is function 2

window.setTimeout ()을 호출하면 비동기 실행 호출이 수행하는 JS 실행 작업 루프에 작업이 추가되고 JS 런타임의 "실행 완료"의 기본 원칙이 onClick ()을 보장하기 때문에 작동합니다. 끝나기 전에 중단되지 않습니다.

코드를 이해하기 어려울 수있는 것만 큼 재미 있습니다.