如何使用 append 停止 JavaScript for 循环

Question

我在使用 for 和显示数据时遇到问题。每次用户滚动到底部时向下滚动并添加 7 个字母，但当字母完成时，它又给我两个未定义的字母，我不知道如何修复它。我试过 break 但没有任何新东西。

你能帮帮我吗？谢谢

var x = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];

var xLength = x.length;

for (var i = 0; i < 7; i++) {
  $("#testDiv").append(`
    <p>` + i + ` : ` + x[i] + `</p>
  `);
}

window.onscroll = function() {
  if (window.scrollY > (document.body.offsetHeight - window.outerHeight)) {
    console.log("It's working!");
  }
}

window.onscroll = infiniteScroll;
var isExecuted = false;

function infiniteScroll() {
  if (window.scrollY > (document.body.offsetHeight - window.outerHeight) && !isExecuted) {
    isExecuted = true;
    var fromItem = $("#testDiv").children().length;

    for (var i = fromItem;
      (i < fromItem + 7) && (xLength > fromItem); i++) {;
      $("#testDiv").append(`
        <p>` + i + ` : ` + x[i] + `</p>
      `);
    }

    setTimeout(() => {
      isExecuted = false;
    }, 1000);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="testDiv"></div>

Answer 1

var x = [...'abcdefghijklmnopqrstuvwxyz']
for (var i = 0; i < 7; i++) {
  if(x[i]){$("#testDiv").append(`<p>${i+1}: ${x[i]} </p>`);}
}

window.onscroll = infiniteScroll();
function infiniteScroll() {
    var fromItem = $("#testDiv").children().length;
    for (var i = fromItem; i <= x.length; i++) {                 
      if(x[i]){$("#testDiv").append(`<p>${i+1}: ${x[i]} </p>`);}
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="testDiv"></div>

我使代码更具可读性并使用 if 语句修复了问题

Answer 2

加两个条件，这里有 link

var x = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];

var xLength = x.length;
var maxAddItems = 7;

for (var i = 0; i < maxAddItems; i++) {
                          
  $("#testDiv").append(`

    <p>`+ i +` : `+ x[i] +`</p>

  `);
}

window.onscroll = function () {
  if (window.scrollY > (document.body.offsetHeight - window.outerHeight)) {
      console.log("It's working!");                            
  }
}

window.onscroll = infiniteScroll;

var isExecuted = false;

function infiniteScroll() {

  if (window.scrollY > (document.body.offsetHeight - window.outerHeight) && !isExecuted) {

    isExecuted = true;

    var fromItem = $("#testDiv").children().length;

    if( fromItem <= xLength ) {
  
      if( (fromItem + maxAddItems) > xLength ) {
          maxAddItems = xLength % maxAddItems;
      }

        for (var i = fromItem; (i < fromItem + maxAddItems) && (xLength > fromItem); i++) {;
                                  
          $("#testDiv").append(`

            <p>`+ i +` : `+ x[i] +`</p>

          `);
        }
    }

    setTimeout(() => {
      isExecuted = false;
    }, 1000);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="testDiv"></div>

如何使用 append 停止 JavaScript for 循环

How to stop a JavaScript for loop using append

javascript

arrays

jquery

for-loop

infinite-scroll