[英]How to execute javascript sequentially?
我期望輸出:A,B,C。但它不起作用。 如果函數handleClick(element)無法更改,如何更改其他函數以確保所有代碼按順序執行並按預期輸出A,B,C?
async function handleClick(element) { setTimeout(function(){ console.log(`Click on Element_${element}`); } , Math.random(5)*1000); } async function clickLetter(letter) { await handleClick(letter); } async function clickGroup(group) { await handleClick(group); } const letters = ['A', 'B', 'C']; function clickLetters(letters, fn) { let index = 0; return new Promise(function(resolve, reject) { function next() { if (index < letters.length) { fn(letters[index++]).then(next, reject); } else { resolve(); } } next(); }); } clickLetters(letters, clickLetter);
如前所述, async
庫是一種方法。
如果你想繼續使用當前的解決方案,問題出在你的handleClick()
,其中隱含的promise在超時之前立即返回。 然后,根據每次傳遞的隨機超時,它將導致out或ordr執行。 修復只是解決了承諾然后超時。
function handleClick(element) { return new Promise(resolve => { setTimeout(function(){ console.log(`Click on Element_${element}`); resolve(); } , Math.random(5)*1000); }); } async function clickLetter(letter) { await handleClick(letter); } function clickLetters(letters, fn) { let index = 0; return new Promise(function(resolve, reject) { function next() { if (index < letters.length) { fn(letters[index++]).then(next, reject); } else { resolve(); } } next(); }); } const letters = ['A', 'B', 'C']; clickLetters(letters, clickLetter);
閱讀有關異步的信息並在此等待。
這是代碼。 說明就在最后。
async function handleClick(element) { return new Promise((resolve, reject) => { setTimeout(function(){ console.log(`Click on Element_${element}`); resolve(); }, Math.random(5)*1000); }); } async function clickLetter(letter) { await handleClick(letter); } async function clickGroup(group) { await handleClick(group); } const letters = ['A', 'B', 'C']; async function clickLetters(letters, fn) { for(let i=0; i<letters.length; i++) { await clickLetter(letters[i]); } } clickLetters(letters, clickLetter);
解釋您將需要進行哪些更改 -
第1步 - 轉換handleClick函數以返回Promise
。
第2 clickLetters
- 在clickLetters
函數中使用await
按順序打印值。
setTimeout
函數是異步的,結果立即返回,您需要將其包裝在promise構造函數中,然后解析它。
function handleClick(element) { return new Promise((resolve, reject) => { setTimeout(() => { console.log(`Clicked on Element_${element}`); resolve(); }, Math.random(5) * 1000); }); } async function clickLetter(letter) { await handleClick(letter); } async function clickGroup(group) { await handleClick(group); } const letters = ['A', 'B', 'C']; async function clickLetters(letters, fn) { for(let i = 0; i < letters.length; i++) { await clickLetter(letters[i]); } } clickLetters(letters, clickLetter);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.