在javascript/jquery中按顺序解决Promise [英] Resolve promise sequentially in javascript/jquery

问题描述

我有几个功能，需要顺序执行，

I have several functions and that needs to be executed sequentially,

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()喜欢

function home() should be called first, options() should be call 2nd, and so on I have $.when() like

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

但它不会顺序调用函数 请给我建议一种方法.

but it doesn't call functions sequentially Please suggest me a way here.

推荐答案

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

Seems all you need is to chain the Promises correctly

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

这篇关于在javascript/jquery中按顺序解决Promise的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！