promise - 如何检测多个pdf.js渲染任务已完成

Question

我现在正在尝试将包含多个页面的整个 pdf 文件渲染到我的网页中，并且一个 Canvas 对应于一页。虽然我可以将代码放入 then() Promise 中以解决单页渲染后的问题，但我发现无法使用 $.when 函数来检测所有页面都已渲染。我当前的解决方案是逐个渲染页面并在最后一页的 then() Promise 中运行我的代码。希望还有其他解决方案!

谢谢!

这是不起作用的代码:

var renderArray = new Array();
for (var pageNo = 0; pageNo < pdfPageArray.length; pageNo++)// All pages extracted by PDF.JS are stored in pdfPageArray
{
    var page = pdfPageArray[pageNo];
    var viewport = page.getViewport(printScale);
    var canvas = document.createElement('canvas');
    $(canvas).css({width:"100%",height:"100%"});
    var outputScale = getOutputScale(context);
    canvas.width = (Math.floor(viewport.width) * outputScale.sx) | 0;
    canvas.height = (Math.floor(viewport.height) * outputScale.sy) | 0;
    $(printPageDiv).append(canvas);
    var context = canvas.getContext("2d");
    var renderContext = {
        canvasContext: context,
        viewport: viewport
    };
    renderArray.push(page.render(renderContext));

}
return $.when.apply($, renderArray);//It seems this when function doesn't work

Answer 1

这是一个棘手的问题。

jQuery promise 不会同化其他库的 promise ，它们不是 Promises/A+ 的提示，并且它们不能与其他 promise 很好地互操作。事实上 $.when 仅适用于 jQuery Promise。

取而代之的是原生 Promise，或者 PDF.JS 提供的 Polyfill，甚至是功能更强大的 Promise 库。

将 $.when.apply($, renderArray) 更改为:

Promise.all(renderArray);

其他一些技巧 - 使用 [] 而不是 new Array (做同样的事情)，您可能需要考虑做一个 .map 直接进入 Promise.all 以更好地传达意图。