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)（注意：not delay，您的基于 promise 的sleep）让浏览器允许它进行任何绘图等。

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

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);

    }

})();