Question

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

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

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

我尝试以不同的方式（使用承诺等），但它不能按预期工作。如何强制'for loop'等待？

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（）函数也可能在'function'之前有'async'字样？

我查看了许多异步/等待样本，但没有帮助。

感谢。

P.S。更多信息：

html +脚本使用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);
    });
});

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

很遗憾，我无法联系那个人。他/她没有回答秋天的任何问题。

Answer 1

要等待操作，必须异步（或返回承诺）。此外，当您点击按钮时，您仅执行（并等待完成）点击，而不执行事件处理程序。

您应该创建一个用于处理一张图片的函数（在您的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);
    }            
}

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

Javascript Async等待功能要求

1 个答案: