javascript - 回调/ promise 无法正常工作

Question

我有这样的代码:

function makeDiv(callback){
    var dfd = jQuery.Deferred();
    $(function() {
        $("#full_complete").append($(dose_credit).html()+ " " +$(storyboard).html() + " " +$(nar_name).html() + " " +$(nar_text).html());
        full = $(this).closest('div').find("#full_complete");
        dfd.resolve( "hurray" );
    })
     return dfd.promise();
}

function generateImg2(){
var doc = new jsPDF();
doc.fromHTML($(full).get(0), 15, 15, {
    'width': 170, 
});
doc.save('Test.pdf');
}

我用它来调用这些函数:

 $.when(makeDiv()).then(generateImg2());

这会生成一个空白 PDF，因为表示 #full_complete 的 full 尚未完全创建。这就是为什么我希望使用回调，但它显然不起作用，因为这两个函数基本上同时触发。

我在这里做错了什么？我猜这就是我设置 promise 的方式，但不确定如何解决它。

Answer 1

Deferred 允许您进行异步操作。为此，将内部函数包含在 setTimeout 中以完全模拟异步操作:

function makeDiv(callback){
    var dfd = jQuery.Deferred();
    setTimeout(function() {
        $("#full_complete").append($(dose_credit).html()+ " " +$(storyboard).html() + " " +$(nar_name).html() + " " +$(nar_text).html());
        full = $(this).closest('div').find("#full_complete");
        dfd.resolve( "hurray" );
    }, 0);
     return dfd.promise();
}

这样做，您将在解决之前返回promise。

还有一种利用 promise 的链接性质的替代方案:

function makeDiv(callback){
    var dfd = jQuery.Deferred();
    setTimeout(function() {
        dfd.resolve( "hurray" );
    }, 0);
     return dfd.promise();
}

makeDiv().then(function(result) {
  console.log(result); //hurray
  $("#full_complete").append($(dose_credit).html()+ " " +$(storyboard).html() + " " +$(nar_name).html() + " " +$(nar_text).html());
  full = $(this).closest('div').find("#full_complete");
});

更进一步，您可以编写一个帮助程序来确保代码的异步性质:

function async(){
    var dfd = jQuery.Deferred();
    setTimeout(function() {
        dfd.resolve();
    }, 0);
     return dfd.promise();
}

async().then(function() {});