在顺序循环中修改多个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) {

    return new Promise(resolve => {

        /* DO ASYNC STUFF */

        // Resolve with some result if the next item in the chain needs it

        return resolve("OK");

    });

}

let p = Promise.resolve(null);

for (let i = 0; i < 5; i++) {

    p = p.then(prevResult => {

        if (prevResult) {

            // Do stuff with prevResult if needed

        }

        // Chain next item

        return promiseChain(i);

    });

}

日志示例

这将记录0-4，一次记录一次，每次间隔等待一秒钟。

function promiseChain(i) {

    return new Promise(resolve => {

        setTimeout(() => {

            console.log(i);

            return resolve("OK");

        }, 1000)

    });

}

let p = Promise.resolve(null);

for (let i = 0; i < 5; i++) {

    p = p.then(prevResult => {

        if (prevResult) {

            // Do stuff with prevResult if needed

        }

        return promiseChain(i);

    });

}