非同期関数呼び出しがある場合のJavaScriptの同期フロー

Question

jqueryの延期、約束などについて一読しました。

私の問題は本当に簡単です。

私は他の4つの関数を呼び出す関数が1つあり、そのうちのいくつかはサーバーからデータを取得するための非同期呼び出しを持っています。

function A() { 
    async call 
    console.log("1"); 
} 

function B() { 
    normal code 
    console.log("2"); 
} 

function C() { 
    async call 
    console.log("3"); 
} 

function xyz() { 
    A(); 
    B(); 
    C(); 
    print str; 
} 

期待される結果は、123strである。

私は312または213を取得します。基本的に3つの関数は、もう一方の終わりを待つことはありません。私は$ .when（a）.then（b）と約束して.doneを試してみました。

しかし、何も動作しません。誰かが私にベアボーンのサンプルコードを与えることができますか？

EDIT：

function setId() { 

var doc = sessionStorage.getItem("urlDoc"); 
var user = sessionStorage.getItem("LoggedUser"); 
var string = "urlDoc=" + doc + "&user=" + user; 
if (sessionStorage.getItem("countId") === null) { 
    $.ajax({ 
     type: 'POST', 
     url: 'php/findTemporaryId.php', 
     data: string, 
     success: function (data) { 
      sessionStorage.setItem("countId", data); 
      countId = sessionStorage.getItem("countId"); 
      id = countId; 
      console.log("1"); 

     }, 
     error: function() { 
      alert("Server Error"); 
     } 
    }); 
} else { 
    sessionStorage.setItem("countId", parseInt(sessionStorage.getItem("countId")) + 1); 
    countId = sessionStorage.getItem("countId"); 
    id = countId; 
    console.log("1"); 

} 

その後、

function setAuthor() { 
    author = sessionStorage.getItem('LoggedUser'); 
    console.log("2"); 

} 

その後、

function getData() { 
    $.ajax({ 
    type: 'POST', 
    url: 'php/date.php', 
    success: function (data) { 
     date = data; 
     console.log("3"); 
    }, 
    error: function() { 
     alert("Error"); 
    } 
}); 
} 

これは私がそれらを呼び出す方法です

function saveSelectionFragment() { 

     setId(); 
     setAuthor(); 
     getData(); 
} 

ここでは、Firebugのコンソールです。 http://i.imgur.com/zQ0Mk4E.jpg

Answer 1

、あなたがPromisesてみました何も投稿していなかったので、ここでは関数からjQueryの約束オブジェクトの

function A() { 
 
    return new Promise(function(done) { 
 
    // emulate async call with setTimeout 
 
    setTimeout(function() { 
 
     console.log("1"); 
 
     done(); 
 
    }, 100); 
 
    }); 
 
} 
 

 
function B() { 
 
    return new Promise(function(done) { 
 
    // "normal" code 
 
    console.log("2"); 
 
    done(); 
 
    }); 
 
} 
 

 
function C() { 
 
    return new Promise(function(done) { 
 
    // emulate async call with setTimeout 
 
    setTimeout(function() { 
 
     console.log("3"); 
 
     done(); 
 
    }, 100); 
 
    }); 
 
} 
 

 
function xyz() { 
 
    A() 
 
    .then(B) 
 
    .then(C) 
 
    .then(function() { 
 
     // whatever this is supposed to be 
 
     //print str; 
 
     // maybe you meant.. 
 
     console.log('str'); 
 
    }); 
 
} 
 

 
xyz();

Answer 2

returnPromise ...それがどのように動作するかです。プロビジョニングオブジェクトを返すプロミスまたは関数を連結するには、.then()を使用します。

function A() { 
 
    return $.Deferred(function(dfd) { 
 
    setTimeout(function() { 
 
     dfd.resolve("1") 
 
    }, Math.floor(Math.random() * 2500)) 
 
    }) 
 
    .then(function(result) { 
 
    console.log(result); 
 
    return result 
 
    }); 
 
} 
 

 
function B() { 
 
    var value = "2"; 
 
    console.log(value); 
 
    return value 
 
} 
 

 
function C() { 
 
    return $.Deferred(function(dfd) { 
 
    setTimeout(function() { 
 
     dfd.resolve("3") 
 
    }, Math.floor(Math.random() * 2500)) 
 
    }) 
 
    .then(function(result) { 
 
    console.log(result); 
 
    return result 
 
    }); 
 
} 
 

 
function xyz(results) { 
 
    return A() 
 
    .then(function(data) { 
 
    results.push(data); 
 
    return B() 
 
    }) 
 
    .then(function(data) { 
 
    var value = "3"; 
 
    results.push(data); 
 
    return C() 
 
    }) 
 
    .then(function(data) { 
 
    var value = "str"; 
 
    results.push(data, value); 
 
    console.log(value); 
 
    return results 
 
    }) 
 
} 
 

 
xyz([]) 
 
.then(function(results) { 
 
    console.log("complete:", results); 
 
}) 
 
.fail(function(err) { 
 
    console.log(err); 
 
})

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

Answer 3

$(".button").click(function(){ 
 
    a(function(){ 
 
    b(function(){ 
 
     c(function(){ 
 
     d(function(){ 
 
     
 
     }); 
 
     }); 
 
    }); 
 
    }); 
 
}); 
 
function a(callback){ 
 
    console.log("1"); 
 
    callback(); 
 
} 
 

 
function b(callback){ 
 
console.log("2"); 
 
    callback(); 
 
} 
 

 
function c(callback){ 
 
console.log("3"); 
 
    callback(); 
 
} 
 

 
function d(callback){ 
 
console.log("4"); 
 
    callback(); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<button class="button" >ClickToCall</button>

あなたはすべての機能とコールバックを試してみる必要があることがございます。 このタイプのプロセスを管理する必要があるとき。私は常に完全なプロセスを管理するコールバックを使用しています。関数a、b、c、dではajax呼び出しを行い、ajaxの成功時にはcallback（）関数を渡す必要があります。

はあなたが今async/awaitを使用することができますChromeとFirefoxのデベロッパー版でこの

Answer 4

に関するより多くの情報が必要なら、私に教えてください。ストレートフォワード：

var wait = ms => new Promise(resolve => setTimeout(resolve, ms)); 
 

 
async function A() { 
 
    await wait(100); 
 
    console.log("1"); 
 
} 
 

 
function B() { 
 
    console.log("2"); 
 
} 
 

 
async function C() { 
 
    await wait(100); 
 
    console.log("3"); 
 
} 
 

 
async function xyz() { 
 
    await A(); 
 
    B(); 
 
    await C(); 
 
    console.log("Done."); 
 
} 
 

 
xyz();

それはまだ約束を使用していますが、あなたはほとんど言うことはできません。