使用 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);

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

Prevent simultanous function calls when using pdf.js?

javascript

pdf

jquery

loops

pdf.js