javascript - 在顺序循环中修改多个 Highcharts

Question

摘要

我目前工作的环境中，给定页面上有大约 14 个以上的股票图表(每个图表都有 20,0000 多个独特的数据点，有些甚至更多)。我有某些全局“切换”，例如，会影响显示哪个系列、图表选项或轴极值(在所有图表上)。鉴于用户一次只能看到一个图表，我想将图表的更新视为队列，首先更新一个图表，然后再更新第二个图表，依此类推。

我的目标:在循环中按顺序调用 Highcharts.Chart.redraw() (即，一次在页面中的每个图表上调用重绘 - 以便首先重绘图表列表中的第一个图表)。请注意，图表列表的顺序是动态创建的，并且已经处理好。

背景

到目前为止，我已经阅读了大量有关 JavaScript Promise 的文章，我过去曾用它来链接 ajax 调用。正如以下链接中所讨论的:

• Pass in an array of Deferreds to $.when()
• jQuery Deferred's, $.when() and the fail() callback arguments
• Wait until all jQuery Ajax requests are done?
• How can I wait for set of asynchronous callback functions?

我还在这里阅读了一些与循环中的 Promise 相关的更一般性问题:

• JavaScript ES6 promise for loop
• Resolve promises one after another (i.e. in sequence)?

代码/详细信息

我尝试了多种解决方案，并且相信问题在于使 Highcharts 重绘函数 - 或调用它的操作(如 Chart.update()、Series.setVisible()、Axis.setExtremes()) - 返回一个 promise 。

我上传了一些 shell here它允许您触发一个事件，并看到每个图表基本上是立即更新的。

---

例如，如下所示:

$(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));
    }
});