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

Question

我使用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 = '<canvas data="{{ raw_path }}" class="pdf-view hide" style="margin-bottom:10px;"></canvas>';
        $('#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);