在javascript / jquery中按顺序解析promise

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

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()应调用2nd，依此类推我有$.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 // ie home item, n * options items, m * inclusions items });