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

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