了解 w3.includeHTML JavaScript 函数的递归答案

【问题标题】：Understand recursion of w3.includeHTML JavaScript function了解 w3.includeHTML JavaScript 函数的递归
【发布时间】：2017-07-07 12:16:46
【问题描述】：

下面的 JavaScript 函数包含来自 HTML 标记中的文件的 HTML，其类为“w3-include-html”。

有人能解释为什么 w3.includeHTML(cb) 函数本身在函数中间被再次调用吗？这不会产生无限循环吗？非常感谢任何帮助。

w3.includeHTML = function(cb) {
  var z, i, elmnt, file, xhttp;
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          elmnt.innerHTML = this.responseText;
          elmnt.removeAttribute("w3-include-html");
          w3.includeHTML(cb);
        }
      }      
      xhttp.open("GET", file, true);
      xhttp.send();
      return;
    }
  }
  if (cb) cb();
};

【问题讨论】：

这只是一个递归调用——因此，如果在您刚刚加载并插入到文档中的内容中再次存在具有此属性的元素，那么也会对它们执行相同的操作。它不会创建无限循环，因为如果不存在具有该属性的其他元素，则不会再次调用该函数。
尽管如此，这是一个相当糟糕的解决方案（是的，w3schools 在这方面是可靠的），因为它每次都会遍历文档中的每个元素。仅选择首先设置了属性的元素会更有意义，即使在 vanilla JS 中使用 document.querySelectorAll 这些天也是可能的。
没有。这不是一个无限循环，因为它从页面中删除属性，然后再次运行该函数，检索所有存在的属性并尝试对其进行迭代，它不会因为它刚刚删除它，除非您刚刚加载的页面包含属性，然后函数将再次运行，但在新加载的页面上定位属性。如上所述，它称为递归调用。

标签： javascript html ajax innerhtml

【解决方案1】：

有人能解释一下为什么 w3.includeHTML(cb) 函数本身会在函数中间被再次调用吗？

因为您包含的文件试图包含其他内容。

这不会产生无限循环吗？

不，因为上一行从完成包含的元素中删除了该属性。

【讨论】：

很好的答案，谢谢。你能说一下if (cb) cb();这行最后做了什么吗？这是我唯一不清楚的另一件事。
如果你通过了，它会调用回调函数。