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

【问题标题】：How to detect that multiple pdf.js rendering tasks have finished如何检测多个 pdf.js 渲染任务已完成
【发布时间】：2014-08-03 09:30:50
【问题描述】：

我现在正在尝试将包含多个页面的整个 pdf 文件呈现到我的网页中，并且一个画布对应一个页面。虽然我可以将代码放入 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

【问题讨论】：

标签： promise pdf.js

【解决方案1】：

这是一个棘手的问题。

jQuery Promise 不吸收来自其他库的 Promise，它们不是 Promises/A+ 投诉，并且它们不能与其他 Promise 很好地交互。事实上$.when 只适用于 jQuery 承诺。

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

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

Promise.all(renderArray);

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

【讨论】：

非常感谢您的解释！
不客气，这是 jQuery 的错，而不是其他任何事情