Javascript，如何在循环中每秒同步调用函数？

Question

我很难使用 async/await 使其在循环中同步工作。 我的小 showChart 所做的是从服务器请求 10 个项目并使用 plotly 在服务器上绘制它。 为了让它像每秒都来一样，我喜欢把一些睡眠时间最好精确到 1000 毫秒。然而，console.log 似乎每秒打印一次，但 drawChart 函数不是每秒调用一次，而是在最后一分钟显示所有内容。我怎样才能让它每秒画一次？ 先谢谢了~~！！

/**
 * data comes with { status: '' , message:{ result : [{point:''}, {point:''} ...]}} in json format.  
**/
async function  showChart(url, nextPage ){
        let requestUrl  = url+nextPage;
        let resposne = await fetch(requestUrl);
        let data = await resposne.json();
        data = data.message.result;
        let points = await data.map(e=>e.point);
        console.log(fp1Deltas);
        const num =  fp1Deltas.map(  async delta =>{
           delay(1000);
           // await sleep (1000);
           drawChart(delta);
           console.log( delta);
         });
        console.log('done');       
    }

    const sleep = ms=>{
        return new Promise(resolve => setTimeout(resolve, ms));
    }

 const delay = ( ms)  => {
            var start = new Date().getTime();
            var end = start;
            while( end < start + ms ){
                end = new Date().getTime();
            }
    };

    const  drawChart = point =>{

        Plotly.extendTraces('chart1', {
            y: [
                 [point]
            ]
        }, [0]);
    }

    $(document).ready(function () {
        Plotly.plot('chart1', [{
            y: [],
            type: 'line'
        }]);
        showChart(requestLocation, page);
        // fetchData(requestLocation,page);

    }); // end of document ready

Answer 1

如果您想遍历fplDeltas 并调用drawChart 每个增量，间隔一秒，您可以这样做：

// So we skip the `sleep` the first time
let first = true;
for (const delta of fplDeltas) {
    // Sleep on all but the first
    if (first) {
        first = false;
    } else {
        await sleep(1000);
    }
    // Draw the chart
    drawChart(delta);
}

因为这是在 async 函数中，所以 await sleep(1000)（注意：不是 delay，你的基于承诺的sleep）让浏览器允许它进行任何绘图，等等

这是一个简单的例子，只是在 drawChart 中添加一个 DOM 元素：

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

async function example() {
    const fplDeltas = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    let first = true;
    for (const delta of fplDeltas) {
        // Sleep on all but the first
        if (first) {
            first = false;
        } else {
            await sleep(1000);
        }
        // Draw the chart
        drawChart(delta);
    }
}

function drawChart(delta) {
    const div = document.createElement("div");
    div.textContent = delta;
    document.body.appendChild(div);
}

(async () => {
    try {
        await example();
        console.log("Done");
    } catch (e) {
        console.error("Error:", e);
    }
})();