[javascript] 이전 기능이 완료된 후 기능 호출

Program / 글쓴이

다음 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);
}