延迟函数的问题

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

您实际上并没有在这里使用 promises/deferreds，因为您的 generateImg 或 restoreIt 没有 return 任何东西。您需要在 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();
}

延迟函数的问题

Issues with deferring function

javascript

jquery

html2canvas