在 javascript/jquery 中按顺序解析 promise答案

【问题标题】：Resolve promise sequentially in javascript/jquery在 javascript/jquery 中按顺序解析 promise
【发布时间】：2017-08-30 07:53:19
【问题描述】：

我有几个函数，需要按顺序执行，

function home() {
  var home = document.getElementById('home');
  html2canvas(home).then(function(canvas) {
    home.appendChild(canvas);
    var basic = canvas.toDataURL();
    var item = {};
    item["image"] = basic;
    item["width"] = 595;
    data_1.push(item);
  });
}

function options() {
  var temp_cnt = 0;
  $('.tour_options_table_data_info').each(function( index, element ) { 
   html2canvas(element).then(function(canvas) {
    element.appendChild(canvas);
    elem  = canvas.toDataURL();
    var item = {};
    item["image"] = elem;
    item["width"] = 595;
    data_1.push(item);
  }); 
 });
}

function inclusions() {
  $('.inc-main1,.inc-main2,.inc-main3').each(function( index, element ) { 
   html2canvas(element).then(function(canvas) {
    element.appendChild(canvas);
    elem  = canvas.toDataURL();
    var item = {};
    item["image"] = elem;
    item["width"] = 595;
    data_1.push(item);
  }); 
 });
}

function home() 应该首先被调用，options() 应该被调用第二个，以此类推我有$.when() 喜欢

$.when(home(),options(),inclusions()).done(function(a,b,c) {
  console.log(a,b,c);
})

但它不会按顺序调用函数请在这里给我建议。

【问题讨论】：

无法按照您的意愿执行此操作。如果下一个请求中需要来自一个请求的数据，那么您将必须按顺序执行它们 - 即。将它们链接在它们的回调中。
@RoryMcCrossan 我只想按顺序将数据推送到data_1 数组中，我的意思是首先它应该有home() 然后它应该有options() 数据，是否可以不链接他们的回调？
如果能识别出数组中每个请求的数据，使其可以通过sort()运行，那么可以，否则不行。
@RoryMcCrossan 如果我不使用 prev 函数数据进入 next 那么它可以按顺序调用它吗？
你试过$.when({}).then(home).then(options).then(inclusions)吗？

标签： javascript jquery promise

【解决方案1】：

看来你所需要的只是正确地链接 Promise

function home() {
    var home = document.getElementById('home');
    // return the promise, so you can chain it
    return html2canvas(home).then(function(canvas) {
        home.appendChild(canvas);
        var basic = canvas.toDataURL();
        var item = {};
        item["image"] = basic;
        item["width"] = 595;
        data_1.push(item);
    });
}

function options() {
    // create a promise to chain in .each
    var ret = $.when();
    $('.tour_options_table_data_info').each(function(index, element) {
        // chain the promises
        ret = ret.then(function() {
            html2canvas(element).then(function(canvas) {
                element.appendChild(canvas);
                elem = canvas.toDataURL();
                var item = {};
                item["image"] = elem;
                item["width"] = 595;
                data_1.push(item);
            });
        });
    });
    // return the last promise
    return ret;
}

function inclusions() {
    // create a promise to chain in .each
    var ret = $.when();
    $('.inc-main1,.inc-main2,.inc-main3').each(function(index, element) {
        // chain the promises
        ret = ret.then(function() {
            html2canvas(element).then(function(canvas) {
                element.appendChild(canvas);
                elem = canvas.toDataURL();
                var item = {};
                item["image"] = elem;
                item["width"] = 595;
                data_1.push(item);
            });
        });
    });
    // return the last promise
    return ret;
}
home().then(options).then(inclusions).then(() => {
    // data_1 has all the "items" in the order you need
    // i.e. home item, n * options items, m * inclusions items
});

【讨论】：