Question

我仅在加载PDF页面时尝试显示类div的{{1}}。

它可以工作，但是某种程度上loader函数被循环了。

在调用this.displayPage(pdf,1)之后，它返回到renderPage(page)。

这仅在我使用didRender() > this.displayPage(pdf,1)时发生，因此我认为我的问题可能与此有关。

我尝试调试代码，但是我不明白是什么在创建循环。

我正在使用PDFJS库显示PDF文档。

这是我的component.js代码

set(this, 'pageIsRendering', false/true)

这是我的html代码

  pageisRendered: true,
  pageIsRendering: false,

  didRender() {
    pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdf.worker.js';
    set(this, 'setPageValueInput', document.querySelector('.set-page-value'));
    let pdfDoc = pdfjsLib.getDocument(this.url).then(pdf => {
      this.displayPage(pdf, 1);
      this.shownPdf = pdf;
      document.querySelector('.total-page-number').value = this.shownPdf.numPages;
    });
  },

  displayPage(pdf, num) {
    set(this, 'pageIsRendering', true);
    pdf.getPage(num).then(page => {
      if (this.pageisRendered) {
        this.pageisRendered = false;
        this.renderPage(page);
      }
    });
  },

  renderPage(page) {
    let scale = this.pdfScale; // render with global pdfScale variable
    let canvas = document.querySelector('.pdf-canvas');
    let context = canvas.getContext('2d');
    let viewport = page.getViewport(scale);
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    let renderContext = {
      canvasContext: context,
      viewport
    };
    page.render(renderContext).then(() => {
      this.pageisRendered = true;
      set(this, 'pageIsRendering', false);
    });
  },

Answer 1

您的displayPage将调用renderPage，这会导致渲染，该渲染将再次触发didRender，因此很可能导致无限循环。

我认为您只需要一个标志即可跟踪页面是否已呈现。如果是，则不要再次触发didRender。另外，您应该考虑使用其他事件代替didRender之类的init。

  pageisRendered: false,

  didRender() {
    if (this.pageisRendered) {
        return;
    }

    pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdf.worker.js';
    set(this, 'setPageValueInput', document.querySelector('.set-page-value'));
    let pdfDoc = pdfjsLib.getDocument(this.url).then(pdf => {
      this.displayPage(pdf, 1);
      this.shownPdf = pdf;
      document.querySelector('.total-page-number').value = this.shownPdf.numPages;
    });
  },

  displayPage(pdf, num) {
    pdf.getPage(num).then(page => {
        this.renderPage(page);
    });
  },

  renderPage(page) {
    let scale = this.pdfScale; // render with global pdfScale variable
    let canvas = document.querySelector('.pdf-canvas');
    let context = canvas.getContext('2d');
    let viewport = page.getViewport(scale);
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    let renderContext = {
      canvasContext: context,
      viewport
    };
    page.render(renderContext).then(() => {
      set(this, 'pageisRendered ', true);
    });
  },

从ember.js中的set函数获取无限循环

1 个答案: