在javascript / jquery中按顺序解决Promise

Question

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

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);
})

但是它不会顺序调用函数，请在这里为我提供一种方法。

Answer 1

似乎您所需要的只是正确地链接Promises

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
});