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

我的代码如下。
var aaa=函数（pdf，页码）{
获取页面（页码）。然后（函数（第页）{
var标度=1.5；
var viewport=page.getViewport（比例）；
var canvas=$（'.pdf视图'）[第1页]；
var context=canvas.getContext（'2d'）；
canvas.height=viewport.height；
canvas.width=viewport.width；
var renderContext={
背景：背景，
视口：视口
};  
page.render（renderContext）；
}); 
};
对于（变量i=1；i<51；i++）{
aaa（pdf，i）；
如果（i！==50）{
var a=“”；
$（'#文件视图#pdf'）。追加（a）；
} 
}

有一个循环，然后50个函数（

aaa

）同时执行。结果是灾难性的，我的电脑卡住了。我想在最后一个函数执行得很好之后再执行一个函数

---

请帮我改进一下。非常感谢。（很抱歉，我的英语也很糟糕。）

为了避免同时运行单页加载和呈现函数

aaa

，您应该将其调用移动到页面加载的回调-

。然后（

部分，因此它被递归调用。然后使用

页码=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);

//定义页面呈现函数
var aaa=函数（pdf，页码）{
获取页面（页码）。然后（函数（第页）{
var标度=1.5；
var viewport=page.getViewport（比例）；
var canvas=$（'.pdf视图'）[第1页]；
var context=canvas.getContext（'2d'）；
canvas.height=viewport.height；
canvas.width=viewport.width；
var renderContext={
背景：背景，
视口：视口
};  
page.render（renderContext）；
如果（i<50）{
//呈现前50页，但不是除#50页以外的所有页面
aaa（pdf，i）；
i++；
}
}); 
};
//预生成50张画布
var docFragment=document.createDocumentFragment（）；
对于（变量i=1；i<51；i++）{
var c=document.createElement（“画布”）；
$（c）.数据（{{raw_path}}）；
$（c）.addClass（'pdf-view-hide'）；
$（c.css（'margin-bottom'，'10px'）；
文件附件（c）；
}
$（'#文件视图#pdf'）.append（docfrag）；
//调用渲染
var i=1；
aaa（pdf，i）；

你能告诉我们aaa（）函数内部发生了什么吗？这是一个ajax函数吗？嗨，我添加了我的代码，它是关于画布的，不是ajax。请看一看EPDF js使用承诺和延迟对象来启用异步处理。使用then（）来附加函数以启用链接。在当前情况下，aaa（）在循环中被调用，它将同时调用aaa（）50次。我知道了，非常感谢！嘿@XPD，看起来你的评论帮助了OP。你可以将其作为一个答案，让其他人更容易找到相同的解决方案。太好了，它对你有效！如果这是一个解决方案，你可以将此答案标记为正确答案