回调完成之前发生的 JavaScript 结果

Question

我是 JS 的新手，几天前开始尝试制作一个 chrome 扩展，如果这是一个简单的问题，我很抱歉，但我似乎无法弄清楚。

我最初的功能是简单地下载图像并将存储的计数递增 1 并增加文件大小。然而，在一张图片上它达到了 chrome 的写入限制，所以我决定计算这些值并在最后写入它们。

最初返回值发生的时间比函数执行的时间晚得多(因此它什么也没返回)，所以我查找了如何修复它并让它与回调一起工作。然而，虽然它等待回调，但代码只是在回调之后继续执行，之后的部分在其他任何事情之前执行，这意味着最终计数将始终为 0。

    // Loop through all urls
    var approx_filesize = 0;
    for(var i = 1; i < all_urls.length; i++){
        var image_url = all_urls[i];
        _download_image(image_url, folder_name, function(item){
            approx_filesize += parseInt(item);
        });
    }

    // This happens before any _download_image functions complete
    alert('end' + approx_filesize);

    // Write to storage
    chrome.storage.sync.get({
        download_count: 0,
        download_size: 0
    }, function(items) {
        chrome.storage.sync.set({
            download_count: parseInt(items.download_count) + all_images_data.length - 1,
            download_size: parseInt(items.download_size) + approx_filesize
        }, function() {
        });
    });

我只是尝试将循环移动到它自己的回调函数中，但仍然没有成功，警报在第一个函数完成之前运行。

function image_url_loop_callback(callback, folder_name, all_urls){

    var approx_filesize = 0;
    for(var i = 1; i < all_urls.length; i++){
        var image_url = all_urls[i];

        _download_image(image_url, folder_name, function(filesize){
            approx_filesize += parseInt(filesize);
        });
    }
    callback(approx_filesize);
}

image_url_loop_callback(function(approx_filesize){
    alert(approx_filesize);
}, folder_name, all_urls);

如何使循环在其他任何事情完成之前完成？

编辑:让它与 promise 一起工作，这是调整后的代码:

new Promise( function(resolve, reject) {
    var count = 1;
    var num_items = all_urls.length;
    var approx_filesize = 0;
    for(var i = 1; i < num_items; i++){
        var image_url = all_urls[i];

        _download_image(image_url, folder_name, function(item){
            approx_filesize += parseInt(item);
            count ++;
            if(count == num_items){
                resolve([num_items, approx_filesize]);
            }
        });
    }
}).then( function(stuff) {
    var num_items = stuff[0];
    var approx_filesize = stuff[1];
    chrome.storage.sync.get({
        download_count: 0,
        download_size: 0
    }, function(items) {
        chrome.storage.sync.set({
            download_count: parseInt(items.download_count) + num_items,
            download_size: parseInt(items.download_size) + approx_filesize
        }, function() {
        });
    });
});

Answer 1

基本上，您必须处理 JavaScript 的异步方面。

为此，您必须使用 Promise。

这是这样工作的:

new Promise( () => {

    // My asynchronous code

}).then( () => {

    // My code which need to wait for the promise resolution.

});

如果您只使用最新版本的浏览器，您还可以查看 async/await 关键字，它们使异步处理比常规 promise 更容易(但仍然是 promise )。

编辑:由于这个答案需要进一步的解释和适当的代码片段，我对其进行了编辑以回答评论。

这个例子可能更容易理解:

let myFoo = "Hello";

test = new Promise( (resolve) => {

    console.log(myFoo);

    myFoo = "World!";

    setTimeout(() => {

        resolve();

    }, 4000);

}).then( () => {

    console.log(myFoo);

});

这将立即打印“Hello”，然后打印“World!” 4 秒后。

这就是您使用 promises 的方式。您可以完美地编辑在 promise 之外的范围内定义的变量。请不要使用 var，坚持使用 let 并定义一个合适的范围。