Question

我有一个函数，它基本上从现有的div中创建一个新div，然后从中生成一个图像。一切正常。完成此操作后，我想empty和hide这个新div。我想我可以使用一些延迟函数来确保新的div在使图像完成的函数之前不会empty。如果它们同时发生或者empty首先发生，则生成的图像为空白（因为div为空）。

在我的代码中，清空和隐藏新div的功能是在制作图像的功能的同时或之前发生的。在创建图像的功能完全完成后，如何确保清空和隐藏新div的功能。

我的代码如下所示：

$('#export_all').click(function(){
    $('#gen_narr').hide();
    $("#full_complete").empty();

    var storyboard = $(this).closest('div').find(".full_storyboard");
    var nar_name = $(this).closest('div').find(".my_narrative_name");
    var nar_text = $(this).closest('div').find(".complete_narrative");

    $("#full_complete").append($(storyboard).html() + " " + $(nar_name).html() + " " + $(nar_text).html());
    full = $(this).closest('div').find("#full_complete");
    $.when(generateImg()).then(restoreIt());
});

function generateImg(callback) {
    html2canvas($(full), {
        onrendered: function(canvas) {
            theCanvas = canvas;
            canvas.toBlob(function(blob) {
                saveAs(blob, + "your_storyboard.jpg"); //this works
            });
        }
    });
}

function restoreIt() {
    $("#full_complete").hide();
    $('#gen_narr').show();
    console.log('restore'); //this works
}

Answer 1

由于generateImg或restoreIt没有返回任何内容，因此您实际上并未在此处使用承诺/延迟。您需要在generateImg内创建将在onrendered

中解析的承诺

尝试这样的事情

function generateImg(callback) {
    var dfd = jQuery.Deferred();

    html2canvas($(full), {
        onrendered: function(canvas) {
            theCanvas = canvas;
            canvas.toBlob(function(blob) {
                saveAs(blob, + "your_storyboard.jpg"); //this works
            });

            dfd.resolve( "hurray" );
        }
    });

    return dfd.promise();
}

延期功能的问题

1 个答案: