绑定javascript后如何调用函数答案

【问题标题】：How to call a function after a bind javascript绑定javascript后如何调用函数
【发布时间】：2021-05-08 18:51:40
【问题描述】：

大家好，请帮助我解决我想在 epub 完全加载后调用函数的情况。

下面的代码成功加载了 epub，但我想显示目录 (toc)，它实际上在 epub 文件加载后显示在开发人员控制台中。我无法让 toc 显示，LoadToc 永远不会被调用，当我改变调用它的位置时，它会立即被调用，而无需等待 epub 完全加载。

book = null;
document.getElementById('bookChooser').addEventListener('change', function(e) {
  var firstFile = e.target.files[0];
  if (window.FileReader) {
    var reader = new FileReader();
    reader.onload = function(e) {
      book = ePub({
        bookPath: e.target.result
      });

      book.renderTo("area");
      /* Replace area with the id for your div to put the book in */

    }.bind(this).bind(this.LoadToc);

    reader.readAsArrayBuffer(firstFile);
  } else {
    alert("Your browser does not support the required features. Please use a modern browser such as Google Chrome, or Mozilla Firefox ");
  }
});

function LoadToc() {
  if (book !== null) {
    var results = book.toc;

    var $select = document.getElementById("toc"),
      docfrag = document.createDocumentFragment();

    var $select = document.getElementById("toc"),
      docfrag = document.createDocumentFragment();

    results.forEach(function(chapter) {
      var option = document.createElement("option");
      option.textContent = chapter.label;
      option.ref = chapter.href;

      docfrag.appendChild(option);
    });

    $select.appendChild(docfrag);
    $select.onchange = function() {
      var index = $select.selectedIndex,
        url = $select.options[index].ref;
      display(url);
      return false;
    };
  }
}

document.getElementById("prev").onclick = function() {
  book.prevPage();
}

document.getElementById("next").onclick = function() {
  book.nextPage();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/epub.js/0.2.13/epub.min.js"></script>
<input type="file" id="bookChooser">
<select id="toc"></select>
<div id="area"></div>
<button id="prev" type="button"><</button>
<button id="next" type="button">></button>

【问题讨论】：

你想用 .bind(this).bind(this.LoadToc); 完成什么（这没有任何意义 o.O）
我给你做了一个sn-p
加book.renderTo("area"); LoadtToc()
@Andreas，请不要介意我，正如我在帖子中看到的那样，我正在尝试进行双重绑定，但它不适用于我的情况。我想在 epub 完全加载后调用 LoadToc()。
嗨@mplungjan，感谢您的编辑。在 book.renderTo("area") 的那一点上，目录仍然没有加载，我之前尝试过。如果您查看开发人员控制台，则 toc 属性尚未显示。但是在调用了 bind(this) 之后，你检查了开发者控制台，你会看到 book 对象下的 toc 属性

标签： javascript epub tableofcontents

【解决方案1】：

好吧，我终于能够解决这个问题了。文件阅读器需要在调用函数之前结束。所以使用下面的代码解决了这个问题。

  ...
  if (window.FileReader) {
    var reader = new FileReader();
    reader.onload = function(e) {
      book = ePub({
        bookPath: e.target.result
    });

    book.renderTo("area");
    /* Replace area with the id for your div to put the book in */

  }.bind(this).bind(this.LoadToc);

  reader.readAsArrayBuffer(firstFile);

  reader.onloadend = () => {
    LoadToc();
  }
} else {
  alert("Your browser does not support the required features. Please use a modern 
  browser such as Google Chrome, or Mozilla Firefox ");
}
...

对于可能面临此类问题的任何人感谢所有评论的人

【讨论】：