Предотвращать одновременные вызовы функций при использовании 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(, поэтому он называется рекурсивно. А затем вызовите функцию aaa только один раз с page_number = 1.

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