javascript - 为什么使用 setTimeout 可以显示图表

Question

我有一个单页应用。

在代码中，我获取数据，然后将其显示在图表中。

但是，存在时间问题:在图表实例化自身之前获取数据。所以图表最终什么也没显示。

我发现的解决方法是使用 setTimeout()。但奇怪的是，我将间隔设置为仅 1 毫秒，然后图表正确显示。

我猜测真正发生的事情是通过使用setTimeout()，当前线程正在完成当前任务，然后返回到刷新函数，然后执行。那是对的吗？

有没有其他方法我应该这样做，因为 setTimeout() 似乎很老套，当然，我们不希望那样。

这是获取数据的代码。

async getItemStatusSummary(parentId:number) {
    this.logger.info("getItemStatusSummary()");
    this.itemStatusInfos = await this.statInfoService.getItemStatusInfoByFolderId(parentId, 'ALL');
    this.refreshItemStatusSummaryChart();
}

这是刷新:

refreshItemStatusSummaryChart() {

    this.logger.info('RefreshingItemStatusSummaryChart()');
    const chart = $("#itemStatusSummaryChart").data("ejChart");
    if (chart) {
        chart.model.series[0].dataSource = this.itemStatusInfos;
        chart.animate(null);
    }
    else {
        this.logger.info('Chart is null');
        window.setTimeout(() => {
            this.refreshItemStatusSummaryChart();
        }, 1);
    }
}

Answer 1

您需要了解 setTimeout 在幕后做了什么。

There is a great talk about this by Philip Roberts that I highly recommend you to listen to, I'll try to explain it shortly in here.

JavaScript 是单线程引擎，意味着一次执行一个 Action ，这种行为称为堆栈，意味着所有任务将按顺序执行。 setTimeout 实际做的是将您的函数传递给它并将其移动到等待堆栈 清理的任务队列所有任务。然后，事件循环 将您的函数从任务队列 中取出并再次将其传递给堆栈。

这意味着调用 setTimeout 将在堆栈的末尾执行您传递的函数，而不管您将其定义为等待的时间，这也是它使用值 的原因0。

一个很好的解决方案是使用 Zone.js，而不是使用 setTimeout。我不会在这个答案中涉及它，而是检查这个 article关于它。