在顺序循环中修改多个Highcharts

Question

我目前在给定页面上有大约14个以上的股票图表的环境中工作（每个图表都有20,0000+个唯一数据点，还有更多）。我有某些全局“切换”，例如，影响显示的系列，图表选项或极限轴（在所有图表上）。鉴于一次只对用户可见一个图表，我想将更新图表视为一个队列，在该队列中，我先更新一个图表，然后再更新另一个，依此类推。

我的目标是：依次循环调用Highcharts.Chart.redraw（）（即，一次对页面中的每个图表调用一次重绘-以便首先重绘图表列表中的第一个图表）。请注意，图表列表的顺序是动态创建的，已经处理完毕。

我已经尝试了许多解决方案，并认为问题围绕使Highcharts重绘功能-或调用该功能的动作（如Chart.update（），Series.setVisible（），Axis.setExtremes（））-兑现承诺。

我在这里上传了一些外壳程序，可让您触发事件，并且可以看到每个图表实际上是一次更新的。

例如，如下所示：

$(Highcharts.charts).each(function(i, chart) {

    console.log(i);

    // decide what to do with the chart

    // update Series, Chart options, Axis extremes... etc.

    chart.redraw(); // call redraw at the end

})

将输出：

> 1, 2, 3, ..., n // pause, then charts would redraw()

可能需要提及的是，尽管上述内容似乎具有响应性，但在我的环境中，单击切换按钮到图表的重绘事件完成之间可能会有2-5秒的延迟。

我不知道的是如何使循环等待每个图表完成其重绘，然后再继续执行列表中的下一个图表。

可以提供的任何帮助将不胜感激。

Answer 1

如果我明白您的意思，则可以通过将触发器中的代码包装在setTimeout（超时值为0）中，然后包装在新的Promise中来实现使用async / await就像$('#trigger').click(async (e) => {    for (let chart of Highcharts.charts) {        await new Promise(resolve => setTimeout(() => {            chart.series.forEach(series => series.setVisible(undefined, false));            chart.redraw();            resolve();        }, 0));    }});

Answer 2

一般解决方案通常，如果您要在循环中顺序地链接promise，可以使用以下格式function promiseChain(i) {&nbsp; &nbsp; return new Promise(resolve => {&nbsp; &nbsp; &nbsp; &nbsp; /* DO ASYNC STUFF */&nbsp; &nbsp; &nbsp; &nbsp; // Resolve with some result if the next item in the chain needs it&nbsp; &nbsp; &nbsp; &nbsp; return resolve("OK");&nbsp; &nbsp; });}let p = Promise.resolve(null);for (let i = 0; i < 5; i++) {&nbsp; &nbsp; p = p.then(prevResult => {&nbsp; &nbsp; &nbsp; &nbsp; if (prevResult) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Do stuff with prevResult if needed&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; // Chain next item&nbsp; &nbsp; &nbsp; &nbsp; return promiseChain(i);&nbsp; &nbsp; });}日志示例这将记录0-4，一次记录一次，每次间隔等待一秒钟。function promiseChain(i) {&nbsp; &nbsp; return new Promise(resolve => {&nbsp; &nbsp; &nbsp; &nbsp; setTimeout(() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(i);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return resolve("OK");&nbsp; &nbsp; &nbsp; &nbsp; }, 1000)&nbsp; &nbsp; });}let p = Promise.resolve(null);for (let i = 0; i < 5; i++) {&nbsp; &nbsp; p = p.then(prevResult => {&nbsp; &nbsp; &nbsp; &nbsp; if (prevResult) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Do stuff with prevResult if needed&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; return promiseChain(i);&nbsp; &nbsp; });}