等待 .each() 中的追加数据完成

如何解决等待 .each() 中的追加数据完成

我有一组输入和图像：

我正在遍历 divs 以获取名称和照片：

$('.subCats').each(function () {
    let id   = genRandomstr(),name = $(this).find('input.subCatName').val();

    if (name.length > 0) {
        dataObj['subCats'].push({
            'id'   : id,'name' : $(this).find('input.subCatName').val()
        });

        $(this).find('.media-list img').each(function () {
            if ($(this).data('stored') === false)
                urlToFile($(this).attr('src'),$(this).attr('title'),'image')
                    .then(function (file) {
                        data.append('subCatsPhotos[' + id + ']',file);
                });
        });
    }

});

我刚收到一个 AJAX 请求，但问题是在图像被附加到 FormData 之前请求正在执行。

这是将图像转换为文件对象的代码：

function urlToFile(url,filename,mimeType) {
    return (fetch(url)
        .then(function(res){return res.arrayBuffer();})
        .then(function(buf){return new File([buf],{type:mimeType});})
);

}

我已经查看了 these solutions，但我正在努力使它们适应我的代码。

解决方法

您可以跟踪发生了多少次追加：

let appended = 0;
const elements = [1,2,3,4,5];
elements.forEach(element => {
    // Do whatever with element
    // Using setTimeout to emulate .then()
    setTimeout(() => {
        console.log('Appended',element,'at',Date.now());
        if (++appended === elements.length) {
            console.log('Appended all!');
            // Do your AJAX request
        }
    },100 * Math.random());
});

或者，如果您可以使用 .map 而不是 .each：

const elements = [5,8,7,5,4];
const promise = Promise.all(elements.map(element => {
    // Some promise
    return new Promise(r => setTimeout(() => {
        console.log('Appended',Date.now());
        r();
    },Math.random() * 100));
}));
promise.then(() => {
    console.log('Appended all!');
});