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

我很难使用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

/**
*数据带有json格式的{status:''，消息：{result:[{point:''}，{point:''}…]}。
**/
异步函数显示图（url，下一页）{
让requestUrl=url+nextPage；
让resposne=等待获取（requestUrl）；
让data=wait resposne.json（）；
数据=data.message.result；
让points=wait data.map（e=>e.point）；
控制台日志（fp1Deltas）；
const num=fp1delta.map（异步增量=>{
延迟（1000）；
//等待睡眠（1000）；
三角洲海图；
控制台日志（增量）；
});
console.log（'done'）；
}
const sleep=ms=>{
返回新承诺（resolve=>setTimeout（resolve，ms））；
}
常数延迟=（毫秒）=>{
var start=new Date（）.getTime（）；
var结束=开始；
同时（结束<开始+毫秒）{
end=新日期（）.getTime（）；
}
};
常量绘图图表=点=>{
Plotly.extendedtraces（'chart1'{
y:[
[要点]
]
}, [0]);
}
$（文档）.ready（函数（）{
Plotly.plot（'chart1'[{
y:[]，
类型：“行”
}]);
显示图（请求位置，第页）；
//获取数据（请求位置，页面）；
}); // 文件结束准备好了吗

如果您想循环通过

fpldelta

并调用

drawChart

，每个delta之间用一秒钟隔开，您可以这样做：

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

由于这是在一个

异步

函数中，

等待睡眠（1000）

（注意：不

延迟

，您基于承诺的

睡眠

）允许浏览器进行任何绘图等操作

下面是一个简单的示例，只需在

drawChart

中添加一个DOM元素：

const sleep=ms=>新承诺（resolve=>setTimeout（resolve，ms））；
异步函数示例（）{
常数fplDeltas=[1,2,3,4,5,6,7,8,9,10]；
让第一个=真；
用于（FPLDELTA的常数增量）{
//除了第一个，其余的都睡吧
如果（第一）{
第一个=假；
}否则{
等待睡眠（1000）；
}
//画图表
三角洲海图；
}
}
函数绘图图（增量）{
const div=document.createElement（“div”）；
div.textContent=delta；
文件.正文.附件（div）；
}
（异步（）=>{
试一试{
等待示例（）；
控制台日志（“完成”）；
}捕获（e）{
控制台错误（“错误：”，e）；
}
})();

基本上你永远不需要那种

delay

函数。（在

await data.map（e=>e.point）中的
await
没有意义<代码>等待

在这个特定示例中没有意义。我在想这个案子，有很多数据进来，我需要处理。因此，它需要一些时间来等待，直到它被解决。（啊！如果你没有看到实时示例，点击刷新——在添加实时示例之前，我犯了一个愚蠢的逻辑错误。）非常感谢。它起作用了。我猜常规的

for

循环可以工作，但不是

map

@CharlieSiNB-

map

对回调返回的承诺没有任何作用（除了构建一个包含这些承诺的新数组），它只是继续通过该数组进行下一次迭代。通常，只有当A）您知道调用回调的对象在回调返回承诺时理解它，或者B）调用回调的对象为您存储返回值并稍后提供给您时，pass

async

才作为回调函数，因此，将

异步

函数与

映射

结合使用可能会很有用，但前提是您需要一系列承诺（无需等待任何承诺兑现）。例如，当您想要启动一组并行运行的异步事物并等待它们全部完成时（async（thing）=>{/*…*/}；），这非常方便

map

几乎是唯一一个没有明确处理承诺的函数，将

async

函数传递给它是有意义的。