前の関数が完了した後に関数を呼び出す

次の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、ECMAScript 6標準のJavaScript機能であるを使用しています。ターゲットプラットフォームがをサポートしていない場合はpromises、PromiseJでポリフィルします。ます。

プロミスは、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
});

または、1つの関数が完了したときにカスタムイベントをトリガーし、それをドキュメントにバインドすることもできます。

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値の更新などの単純な同期JavaScriptを実行している場合、function2はfunction1が完了した後に起動します。

function1がAJAX呼び出しなどの非同期呼び出しを行っている場合は、「コールバック」メソッドを作成する必要があります（ほとんどのajax APIにはコールバック関数パラメーターがあります）。次に、コールバックでfunction2を呼び出します。例えば：

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

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

メソッド1をメソッド2、3、4の後に実行する必要がある場合、次のコードスニペットは、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 runtineタスクループにタスクが追加され、JSランタイムの「実行して完了する」という基本原則により、onClick（）が確実になるためです。終了する前に中断されることはありません。

これがコードを理解するのが難しいかもしれないのと同じくらい面白いことに注意してください...