Javascript Girl
  1. Javascript Girl
  3. Empêcher les appels de fonctions simultanées lors de l'utilisation de pdf.js?
Intereting Posts
Comment faire div glisser de droite à gauche Les points d'arrêt GWT SuperDevMode ne fonctionnent pas Boîte de dialogue de confirmation personnalisée avec JavaScript JQuery getScript () vs document.createElement ('script') JavaScript: comment ajouter dynamiquement un fichier Flash (SWF) au DOM, donc IE va le charger La balise `base` provoque l'ouverture d'iframe comme nouvelle fenêtre dans Internet Explorer Redimensionner dynamiquement la taille de la police pour s'adapter à la taille du conteneur Injection assistée à Aurelia? Existe-t-il un moyen de cacher les numéros de ligne dans Ace Editor? Ouvrir le menu contextuel et actualiser la page parent sur la fenêtre contextuelle prochaine Conversion de blob vers le type de fichier d'origine et mise à disposition pour téléchargement Comment animer les lignes de dessin sur un canevas Qu'est-ce qui se passe sous le capot ici? Temporisateur Javascript dans une boucle Glisser à travers des images avec Bokeh Slider Three.js – effet de panneau publicitaire, maintien de l'orientation après les caméras

Empêcher les appels de fonctions simultanées lors de l'utilisation de pdf.js?

J'utilise pdf.js pour afficher les fichiers pdf, mais le résultat n'est pas bon, jetez un oeil à mon code. 

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

Il y a une boucle, puis 50 fonctions ( aaa ) exécutent en même temps. L'effet est désastreux et mon ordinateur est bloqué. Je veux excuter une fonction juste après la dernière fonction très bien exécutée.

Aidez moi à l'améliorer s'il vous plait. Merci beaucoup. (Désolé, mon anglais est désastreux aussi.)

Pour éviter une exécution simultanée d'une charge de page unique et d'une fonction de rendu aaa , vous devez déplacer son appel vers le rappel de la charge de la page – .then( partie, donc appelée de manière récursive.) Puis, appelez la fonction aaa une seule fois avec 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);