代码之家 › 专栏 › 技术社区 › Fifi

在JavaScript中等待promise和事件侦听器

promise events javascript

Fifi · 技术社区 · 2 年前

这可能是一个简单的问题,但我不知道该怎么做。

加载页面时我需要运行代码和一个承诺得到了解决。由于承诺有点长,我想先开始承诺。这是我的代码:

// 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已加载并且事件已被触发。我从不做我的 很棒的东西 .

以下始终有效:

// 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时正在运行。有没有办法正确地等待这两个事件?

1 回复 | 直到 2 年前

Quentin 2 年前

在加载事件激发时进行promise解析。
使用 Promise.all 等待他们两个。

例如


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

const otherPromise = myLongFunction();

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

4 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

4 月前

Alex · 在轻量级中同时解构和不解构变量

4 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

4 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

4 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

4 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

5 月前

user3472810 · Angular@Output/EventEmitter返回undefined

5 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

5 月前