使用pdf.js时防止同时函数调用？

我使用pdf.js来显示pdf文件，但结果不好，请看看我的代码。

My codes are as follows. var aaa = function (pdf, page_number) { pdf.getPage(page_number).then(function(page) { var scale = 1.5; var viewport = page.getViewport(scale); var canvas = $('.pdf-view')[page_number-1]; var context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; var renderContext = { canvasContext: context, viewport: viewport }; page.render(renderContext); }); }; for (var i = 1;i < 51;i++) { aaa(pdf, i); if (i !== 50) { var a = ''; $('#file-view #pdf').append(a); } } 

有一个循环，然后50个函数（ aaa ）同时执行。 效果是灾难性的，我的电脑卡住了。 我想在最后一个函数执行完毕后立即执行一个函数。

请帮我改进一下。 非常感谢。 （对不起，我的英语也是灾难性的。）

Answer 1

为了避免同时运行单页加载和渲染函数aaa ，你应该将其调用移动到页面加载的回调 – .then(部分因此它被称为递归调用。然后使用page_number = 1调用aaa函数一次。

 //define page render function var aaa = function (pdf, page_number) { pdf.getPage(page_number).then(function(page) { var scale = 1.5; var viewport = page.getViewport(scale); var canvas = $('.pdf-view')[page_number-1]; var context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; var renderContext = { canvasContext: context, viewport: viewport }; page.render(renderContext); if (i < 50) { //render first 50 pages but not all pages except #50 aaa(pdf, i); i++; } }); }; //pre-generate 50 canvases var docFragment = document.createDocumentFragment(); for (var i = 1;i < 51;i++) { var c = document.createElement("canvas"); $(c).data({{ raw_path }}); $(c).addClass('pdf-view hide'); $(c).css('margin-bottom', '10px'); docfrag.appendChild(c); } $('#file-view #pdf').append(docfrag); //call render var i = 1; aaa(pdf, i);