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

Question

我试图仅在加载 PDF 页面时使用类 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);
    });
  },