Javascript Async Await 函数要求

Question

我有一个由其他人创建的项目（html + JavaScript）。 该 html 页面上有一个图像和一个按钮。 当我单击按钮时，它会调用一个函数并处理图像。

我的任务是使用该功能处理多个图像。 图像必须连续处理（不是平行处理），这一点很重要。

我使用 Async Await 方式调用该函数，但是“for 循环”不会等到函数处理完第一张图像，它会转到下一张图像。

我尝试以不同的方式执行此操作（使用承诺等），但它没有按预期工作。 我怎样才能强制'for循环'等待？

async function processImages(fileList) {
    for (let file of fileList) {
        await processOneImage(file);
    }            
}

async function processOneImage(filename) {
    // load an image
    document.getElementById('ImageToBeProcessed').src = filename;
    // call the function created by other person
    await document.querySelector('#start_process').click();
}

.click() 函数是否需要以正确的方式使用“await”？ 例如，.click() 现在不返回任何内容。 我应该添加

return someVar

到.click() 函数的末尾？

或者 .click() 函数在“函数”之前也应该有“异步”这个词？

我看了很多 async/await 示例，但没有帮助。

谢谢。

聚苯乙烯更多信息：

1. 该 html+script 使用 Google Polymer（也许它很重要）。 我缩短了 .click() 函数代码来向您展示。 现在它看起来像：

    this.startProcessButton.addEventListener('click', function () { _this.prepareData().then(function () { // removed unneeded code here... _this.doProcessing() // removed unneeded code here... }).catch(function (error) { console.log(error); }); });

据我了解，这是一个承诺。

2. 不幸的是我无法联系到那个人。 他/她不回答 Autumn 的任何问题。

Answer 1

为了能够等待一个操作，它需要是异步的（或返回一个promise ）。 此外，当您点击按钮时，您只执行（并等待完成）点击，而不是事件处理程序。

您应该创建一个处理一个图像的函数（目前您的processOneImage函数不处理图像 (,)：它发出对 DOM 按钮的点击）：

function processOneImage(image) {
    return _this.prepareData()
        .then(function () {
        // removed unneeded code here ...
        _this.doProcessing()
        // removed unneeded code here ...
    })
        .catch(function (error) {
        console.log(error);
    });
}

• 请注意，我已兑现承诺！

然后你可以将它添加到事件侦听器中：

this.startProcessButton.addEventListener('click', (e) => processOneImage(getFileNameFromClickEvent(e));

• 将与 UI 相关的问题与处理分开 - getFileNameFromClickEvent可以帮助弄清楚如何从 UI 获取文件名或其他输入

如果你有这个，你可以重用processOneImage函数（可等待）而无需处理 DOM 操作和发出点击。

async function processImages(fileList) {
    for (const file of fileList) {
        await processOneImage(file);
    }            
}

注意：这是一个快速修复，您应该考虑遵循最佳实践（例如，不要将 vanilla promises 与 async/await 混合使用）并使用像 React.js 这样的现代客户端框架/库。