两个异步函数后回调

Question

我打电话UseScreenshots给两个html2canvas人之后打电话.

function Main()
{
    var screenshot1, screenshot2;

    html2canvas($('#div1'),
    {
        onrendered: function (canvas)
        {
            screenshot1 = canvas.toDataURL('image/png');
        }
    });

    html2canvas($('#div2'),
    {
        onrendered: function (canvas)
        {
            screenshot2 = canvas.toDataURL('image/png');
        }
    });

    UseScreenshots(screenshot1, screenshot2);
}

在上面的例子中screenshot1,并screenshot2仍将是undefined打电话时UseScreenshots.

---

在deceze的回答之后,我将使用Promise.all:

Promise.all(
[
    new Promise(function (resolve) 
    {
        html2canvas($('#div1'), 
        {
            onrendered: function (canvas) 
            {
                resolve(canvas.toDataURL('image/png'));
            }
        });
    }, 
    new Promise(function (resolve) 
    {
        html2canvas($('#div2'), 
        {
            onrendered: function (canvas) 
            {
                resolve(canvas.toDataURL('image/png'));
            }
        });
    }
]).then(function (screenshots) 
{ 
    UseScreenshots(screenshots[0], screenshots[1]);
});

Answer 1

Promise可以非常优雅地解决这个问题:

Promise.all([new Promise(Function1), new Promise(Function2)]).then(Function3);

请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all.
你需要正确地适应Function1和Function2使用承诺,或者甚至可以自己返回承诺,或者适当地包装它们.

示例创建一个承诺:

new Promise(function (resolve) {
    html2canvas($('#div1'), {
        onrendered: function (canvas) {
            resolve(canvas.toDataURL('image/png'));
        }
    });
})

您将在.then回调中收到已解析的值作为数组:

Promise.all([..]).then(function (screens) { UseScreenshots(screens[0], screens[1]); });