JavaScriptの関数の非同期実行

Question

関数a()と関数b()の2つの関数を並列に呼び出す必要があります。これらの機能は互いに独立しており、これら2つの機能を実行するのに必要な時間は固定されていないと言えます。関数a()は、関数b()より時間がかかり、その逆もあります。しかし、a()とb()の両方の機能が完了したときにのみ実行する必要がある別の機能c()があります。

これはjQueryのDeferredオブジェクトを使ってどのように行うべきですか？

Answer 1

これを実現するには、a()とb()関数が、ロジックが完了したらresolve()という遅延オブジェクトを返すようにすることができます。以前の両方の機能が完了すると、c()を実行できます。あなたがこれを行うにはjQuery.whenを（）を使用することができます

function a() { 
 
    var aDef = $.Deferred(); 
 
    setTimeout(function() { 
 
    aDef.resolve('a done'); 
 
    }, 1000); 
 
    return aDef; 
 
} 
 

 
function b() { 
 
    var bDef = $.Deferred(); 
 
    setTimeout(function() { 
 
    bDef.resolve('b done'); 
 
    }, 3000); 
 
    return bDef; 
 
} 
 

 
function c() { 
 
    console.log('all done!') 
 
} 
 

 
console.log('running...'); 
 
$.when(a(), b()).done(function(a, b) { 
 
    console.log(a); 
 
    console.log(b); 
 
    c(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

：これを試してみてください。 （必要な場合は、各ミリ秒）私はそれぞれ100ミリ秒動作状態をdetermするグローバル変数を使用してポーリングを実行したいhttps://api.jquery.com/jquery.when/

a = function() { 
//your code for function a 
} 
b = function() { 
//your code for function b 
} 

$.when(a(), b()).done(function c() { 
    //your code for function c 
}); 

Answer 3

でこれについての文書をお読みください。

var myStatus = { 
 
    "a": false, 
 
    "b": false 
 
}; 
 

 
function a() { 
 
    myStatus["a"] = true; 
 
    console.log(myStatus['a']); 
 
} 
 

 
function b() { 
 
    myStatus["b"] = true; 
 
} 
 

 
function getStatusText() { 
 
    var s = 'not complete'; 
 
    if (myStatus.a && myStatus.b) { 
 
    s = 'all complete'; 
 
    } else { 
 
    if (myStatus.a) { 
 
     s = 'a complete'; 
 
    } 
 
    if (myStatus.b) { 
 
     s = 'b complete'; 
 
    } 
 
    } 
 
    return s; 
 
} 
 

 
function c() { 
 
    //check operational status 
 
    var statusText = getStatusText(); 
 
    document.getElementById('status').innerHTML = statusText; 
 
} 
 
setInterval(
 
    function() { 
 
    c() 
 
    }, 100);

<button onclick="a()">Set a() complete</button><button onclick="b()">Set b() complete</button> 
 

 
<p>operational status <span id="status"></span></p>

Answer 4

jQueryの延期やコールを処理する方法を約束参照してください。

https://api.jquery.com/deferred.promise/または

https://api.jquery.com/promise/

Answer 5

これはまさに質問への答えではありません。私は延期やそれに類するものを使用しません。

しかし、私はかなり頻繁に行うことを示したい：onReadyコールバックをa（）とb（）のパラメータとして追加する。これらのコールバックを、実行に時間がかかる自己書き出し関数に追加します。

function a(onready) { 
    // let's say we get Ajax data 
    $.ajax({ 
    url: 'data.php', 
    success: function(data) { 
     $('#message').html(data); 
     if(typeof onready == 'function') { 
     onready(); // you might also want to add message as a parameter, like onready(data), or anready('Data okay'), ... 
     } 
    } 
    }); 
} 

function b(onready) { 
    // let's say we sort <table> rows 
    sortTable('my_table', 'my_row', 'ASC'); // this function (not provided here) is not asynchronous, it just takes time before it's done 
    if(typeof onready == 'function') { 
    onready(); 
    } 
} 

function c() { 
    alert('Yippy!'); 
} 

$(document).ready(function() { // or this could be after the client clicks on a button, or so 
    var aReady = false; 
    var bReady = false; 

    a(function() { 
    aReady = true; 
    if(aReady && bReady) { 
     c(); 
    } 
    }); 

    b(function() { 
    bReady = true; 
    if(aReady && bReady) { 
     c(); 
    } 
    }); 

});