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

Question

我试图仅在加载 PDF 页面时显示带有 class loader 的 div。

它可以工作，但是函数 this.displayPage(pdf,1) 不知何故被循环了。

调用renderPage(page)后，返回didRender() > this.displayPage(pdf,1)。

这只会在我使用 set(this, 'pageIsRendering', false/true) 时发生，所以我认为我的问题可能与此有关。

我尝试调试我的代码，但我不明白是什么造成了循环。

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

这是我的 component.js 代码

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

这是我的 html 代码

<div class="pdf-container ">
    <div class="canvas-container">
        {{#if pageIsRendering}}
          <div class="loader">
            {{loading-spinner isLoading="true"}}
          </div>
        {{/if}}
    </div>
</div>

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 函数获取无限循环

Getting an infinite loop from set function in ember.js

javascript

ember.js