jQuery 异步 | Websql

Question

我在循环方面遇到问题。我想实现以下步骤:

从网上下载一个巨大的 JSON 文件，然后我想循环遍历所有对象，并为每个对象(产品)从网上下载图像(使用 AJAX 调用)并填充 property obj.product_image_base64然后再次循环并将它们写入数据库。

奇怪的是，它可以很好地获取图像，但是一旦我拥有所有图像，我就会收到“完成”警报，但我想在它发出“完成”警报之前插入数据。

$.getJSON(product_json_link, function (data) {
    json = JSON.parse(JSON.stringify(data));

    $.each(json, function (index, value) {
        $.ajax({
            url: image_json_link + value.product_id,
            type: "GET",
            async: false,
            success: function (e) {
                console.log("base64");
                value.product_image_base64 = e;
            }
        });
    });

    $.each(json, function (index, value) {
        db.transaction(function (tx) {
            tx.executeSql("INSERT INTO products (product_id, product_description, product_price, product_title, product_category, product_image, product_visible, product_info) VALUES (?, ?, ?, ?, ?, ?, ?, ?)", [value.product_id, value.product_description, value.product_price, value.product_title, value.product_category, value.product_image_base64, value.product_visible, value.product_info], function () {
                console.log("Produkt eingetragen!");
            }, function (t, e) {
                alert("Error while inserting JSON into Catalog.products");
                console.log(e.message);
            });
        });
    });
    alert("DONE");

    $.getJSON(settings_json_link, function (data) {
        json = JSON.parse(JSON.stringify(data));
        $.each(json, function (index, value) {
            localStorage.setItem(value.key, value.value);
        });

        setTimeout(function () {
            $("#sync_button").find("i").removeClass("zmdi-hc-spin");
            $("#settings-dialog").popup("close");
            initialize();
        }, 1000);
    });
});

Answer 1

您可以一次性将所有行插入数据库，然后调用代码的最后几句，尝试如下操作:

    var query = "INSERT INTO products (product_id, product_description, product_price, product_title, product_catergory, product_image, product_visible, product_info) VALUES ";
    var data = [];
    var rowArgs = [];

    $.each(json, function(index, value){
        rowArgs.push("(?, ?, ?, ?, ?, ?, ?, ?)");
        data.push(value.product_id);
        data.push(value.product_description);
        data.push(value.product_price);
        data.push(value.product_title);
        data.push(value.product_category);
        data.push(value.product_image);
        data.push(value.product_visible);
        data.push(value.product_info);
    });

    query += rowArgs.join(", ");

    db.transaction(function (tx) {
        tx.executeSql(query, data, function () {
            console.log("Produkt eingetragen!");
            finish();
        }, function (t, e) {
            alert("Error while inserting JSON into Catalog.products");
            console.log(e.message);
        });
    });

    function finish(){
        $.getJSON(settings_json_link, function (data) {
            json = JSON.parse(JSON.stringify(data));
            $.each(json, function (index, value) {
                localStorage.setItem(value.key, value.value);
            });

            setTimeout(function () {
                $("#sync_button").find("i").removeClass("zmdi-hc-spin");
                $("#settings-dialog").popup("close");
                initialize();
            }, 1000);
        });
    }