Javascript 如何在两个单独的文件中处理异步？

我目前有两个文件

delay.js：为了简化示例，我们假设该文件包含一个异步函数。（显然，实际文件要复杂得多）

gravity.js：一个简单的帆布游乐场：

//画布设置：
const canvas=document.querySelector（'canvas'）；
const c=canvas.getContext（'2d'）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
//以防有人重新调整窗户的尺寸
addEventListener（“resize”，function（））{
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
});
功能画布（x、y、v、宽度、高度、f、g）{
这个.x=x；
这个。y=y；
这个，v=v；
this.draw=函数（）{
c、 fillRect（this.x，this.y，宽度，高度）；
}
this.gravitate=函数（）{
如果（此.y+高度>=窗内高度）{
this.v=-this.v；
this.v=this.v*f；
}否则{
这个.v+=g；
}
这个.y+=这个.v；
这个.draw（）；
}
}
var rect=新画布（0,0,2，window.innerWidth，50,0.76,0.56）；
函数animate（）{
window.requestAnimationFrame（animate）；//用于动画的递归（循环）
c、 clearRect（0，0，canvas.width，canvas.height）；
垂直重力（）；
}
制作动画（）
您可以让
gravity.js
在
窗口
上侦听事件，并仅在该事件触发时激活其代码。当
delay
完成时，触发该事件，以便
gravity.js
看到它并开始运行


console.log（'start'）；
//delay.js
var delay=（ms）=>（新承诺（res=>setTimeout（res，ms））；
延迟（1000）
.然后（（）=>{
log（'delay.js has finished'）；
dispatchEvent（新事件（'delayDone'））；
});
//gravity.js
window.addEventListener（'delayDone'，（）=>{
console.log（“运行重力代码”）；
//在此处插入重力代码
});
您需要将指示
delay.js
结果的承诺存储在全局变量中：

// delay.js
…
var gravityResult = delay(4000)
   .then( () => console.log('delay.js has finished');

然后您可以在另一个文件中使用该文件：

// gravity.js
…
gravityResult.then(animate); // instead of calling `animate()` right away

适当地命名全局变量（或者甚至使用适当的模块系统来避免全局变量并获得声明性依赖关系），如果可能，用动画实际等待的值来解决承诺。
根据您的个人开发经验，您认为什么是“正确”的方法？全局变量看起来更直观，但再一次，大多数javascript学习源不喜欢使用全局范围（从我所看到的情况来看，这是一个很好的原因）。我还没有解决这类问题，所以我宁愿选择一种合适的方式来解决这类问题forward@RawrplusGlobals是两个不同脚本通信的唯一方式。如果要避免这种情况，请使用模块系统。请注意，即使您使用
窗口
事件，它们的名称也是一个全局名称空间。@Rawrplus对于一个大页面，许多全局名称可能是一个问题。如Bergi所提到的，像Webpack这样的模块捆绑器将是最优雅的解决方案，但是您可能不认为它对于没有许多互连部件的较小页面足够有用。您的实际文件是做什么的，为什么其他完全独立的模块需要等待它呢？或者它实际上不是独立的？请详细说明，以便我们能针对您的情况建议最合适的方法。@Bergi Uhm，基本上是一个网站的介绍，我总是想在启动另一个脚本之前先用芬兰语介绍这个网站。我知道在我提供的示例中，他们没有理由等待，但我只是使用这两个代码片段来简化问题。这里的正确解决方案确实是您建议的模块方法。谢谢：）你的意思是，像一个加载屏幕？我想事件和静态承诺都可以。承诺的优点是它可以持久存在，如果在不确定的时间加载了其他东西（比如在事件触发之后），它仍然可以链接到承诺上，并在正确的时间执行。
// gravity.js
…
gravityResult.then(animate); // instead of calling `animate()` right away