从 function 获取需要时间计算的数据

Question

我开发了自己的 react web 服务，该服务使用 canvas API 将图表呈现到屏幕上。 问题在于，在某个时间点，当用户单击计算按钮时，会调用 canvas() function。 取决于它的 arguments，它确实需要时间来返回结果（有很多循环），所以即使是浏览器中的控制台也会冻结并在一段时间后记录结果（可能是 1-5 秒甚至一分钟）。 所以我想知道我的代码到底发生了什么。 它太健壮了，无法在这里提供，但我感兴趣的部分看起来像这样：

1. 用户点击按钮，数据（用户输入）被传递给 canvas function。
2. 调用 Canvas function 并返回结果 - javaScript ZA8CFDE6331149EB2AC96B8。 在 return 语句之前我 console.log 结果。
3. 之后我调用 setState 方法并将结果呈现到屏幕上。 此时我将生成的 JS object 从 (2) 传递到我的 state。

我知道 JavaScript 从上到下“读取”代码，但在我看到 (2) 中的 console.log 之前，结果已经呈现到屏幕上。 所以这意味着结果已经返回并且 state 已设置，否则我不会看到它被渲染。 但是返回语句上方的 console.log 会在一段时间后显示。 所以问题是我应该如何处理它？ 我在不同的快速计算机上对其进行了测试，结果始终相同。 它只是浏览器（chrome，safari）的冻结，它像同步 function 一样工作，还是我应该使用 await 或其他东西来为 canvas ZC1C425268E68385D1AB5074C17A94 之前完成内容提供时间。 这很重要，因为我关心这个结果，并且我想确保使用正确的数据调用 setState。