簡體   English   中英

如何按順序執行javascript?

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM