这可能是一个简单的问题,但我想不出该怎么做.

我需要运行代码时,页面加载and一个promise 被解决.既然诺言有点长,我想先开始许诺.以下是我的代码:

// Wait for the promise
myLongFunction().then(() => {
            
    // Wait for the page to be load and rendered
    window.addEventListener('load', (event) => {

        // I do awesome stuff here
    });
});

有时,当myLongFunction()太长时,DOM已经加载并且事件已经被触发.我从来不做我的awesome stuff件事.

以下方法始终有效:

// Wait for the page to be load and rendered
window.addEventListener('load', (event) => {

    // Wait for the promise
    myLongFunction().then(() => {

        // I do awesome stuff here
    });  
});

我更喜欢第一个选项,因为myLongFunction()是在加载DOM的同时运行的.有没有办法正确地等待这两个活动呢?

推荐答案

  • promise 在Load事件激发时进行解析.
  • Promise.all来等待他们两个.

例如:


const loadPromise = new Promise((resolve) => {
    addEventListener('load', resolve);
});

const otherPromise = myLongFunction();

Promise.all([loadPromise, otherPromise]).then((results => {
    // Both promises have now resolved
});

Javascript相关问答推荐

使用事件监听器在JavaScript中重新分配全局变量

在JS中获取名字和姓氏的首字母

空的结果抓取网站与Fetch和Cheerio

JSDoc创建并从另一个文件导入类型

并不是所有的iframe都被更换

Javascript json定制

使用ThreeJ渲染的形状具有抖动/模糊的边缘

对网格项目进行垂直排序不起作用

React.Development.js和未捕获的ReferenceError:未定义useState

扩展类型的联合被解析为基类型

为什么JPG图像不能在VITE中导入以进行react ?

JavaScript不重定向配置的PATH

Reaction-SWR-无更新组件

当代码另有说明时,随机放置的圆圈有时会从画布上消失

try 将Redux工具包与MUI ToggleButtonGroup组件一起使用时出错

构建器模式与参数对象输入

用另一个带有类名的div包装元素

重新呈现-react -筛选数据过多

ReferenceError:无法在初始化之前访问setData

P5play SecurityError:无法从';窗口';读取命名属性';Add';:阻止具有源的帧访问跨源帧