createElement 创建无限循环

Question

我真的是 javascript 的新手，一般来说编码，我不明白为什么这会导致无限循环：

  let newTr = document.createElement('tr');

如果我将其取出，网页加载正常，但如果我保留它，网页永远不会完全加载并且我的浏览器使用了 50% CPU。

这是我的其余代码：

// client-side js
// run by the browser each time your view template referencing it is loaded

console.log('hello world :o');

let arrPfcCases = [];

// define variables that reference elements on our page

const tablePfcCases = document.getElementById("tablePfcCases");
const formNewPfcCase = document.forms[0];
const caseTitle = formNewPfcCase.elements['caseTitle'];
const caseMOI = formNewPfcCase.elements['caseMOI'];
const caseInjuries = formNewPfcCase.elements['caseInjuries'];

// a helper function to call when our request for case is done
const  getPfcCaseListener = function() {
  // parse our response to convert to JSON
  arrPfcCases = JSON.parse(this.responseText);

  // iterate through every case and add it to our page
  for (var i = 0; i = arrPfcCases.length-1;i++) {
    appendNewCase(arrPfcCases[i]);
  };
}

// request the dreams from our app's sqlite database
const pfcCaseRequest = new XMLHttpRequest();
pfcCaseRequest.onload = getPfcCaseListener;
pfcCaseRequest.open('get', '/getDreams');
pfcCaseRequest.send();

// a helper function that creates a list item for a given dream
const appendNewCase = function(pfcCase) {
  if (pfcCase != null) {
  tablePfcCases.insertRow();
  let newTr = document.createElement('tr');
  for (var i = 0; i = pfcCase.length - 1; i++) {
    let newTd = document.createElement('td');
    let newText = document.createTextNode(i.value);
    console.log(i.value);
    newTd.appendChild(newText);
    newTr.appendChild(newTd);
  }

  tablePfcCases.appendChild(newTr);
  }
}

// listen for the form to be submitted and add a new dream when it is
formNewPfcCase.onsubmit = function(event) {
  // stop our form submission from refreshing the page
  event.preventDefault();
  let newPfcCase = [caseTitle, caseMOI, caseInjuries];
  // get dream value and add it to the list
  arrPfcCases.push(newPfcCase);
  appendNewCase(newPfcCase);

  // reset form 
  formNewPfcCase.reset;

};

谢谢！

P.S。代码可能还有很多其他问题，在我弄清楚之前我无法做任何其他事情！

Answer 1

作为解释，在你的代码中

i = pfcCase.length - 1

将 pfcCase.length - 1 的值赋给了 i。循环那部分的语法应该是

an expression to be evaluated before each loop iteration. If this expression evaluates to true, statement is executed.

对您的代码的评估毫无意义。

正在评估

i < pfCase.length

在每次迭代之前检查当前索引是否小于数组的长度，但是，工作正常。

Answer 2

这里没有条件语句。在此语句中，您将 pfcCase 长度负 1 分配给 I 变量。

for (var i = 0; i = pfcCase.length - 1; i++) {

您必须将 i 变量与 pfcCase 的长度减去 1 进行比较。

这应该有效。

for (var i = 0; i < pfcCase.length - 1; i++) {

注意到其他事情

此行与您认为的不同。

let newText = document.createTextNode(i.value);

i 只是索引，即一个数字。它没有值属性.

这就是您想要做的。

let newText = document.createTextNode(pfcCase[i].value);

我的偏好 (forEach)

我更喜欢使用数组的 forEach 方法。它更干净，更不容易出错。

pfcCase.forEach( function(val){
    let newTd = document.createElement('td');
    let newText = document.createTextNode(val.value);
    console.log('The array element is. '. val.value, ' The value is. ', val.value);
    newTd.appendChild(newText);
    newTr.appendChild(newTd);
  });

createElement 创建无限循环

createElement creates infinite loop

javascript

infinite-loop

createelement

注意到其他事情

我的偏好 (forEach)