如何使用追加停止 JavaScript for 循环

Posted 2023-05-07

【中文标题】如何使用追加停止 JavaScript for 循环

【英文标题】：How to stop a JavaScript for loop using append

【发布时间】：2021-01-26 22:45:30

【问题描述】：

我在使用 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>

【问题讨论】：

xLength > fromItem 应该是i < xLength

是的，我试试，非常感谢@Barmar

【参考方案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 语句解决了问题

【讨论】：

@Barmar 给了我一个解决方案，我试过你的代码，它也可以工作

我所做的只是删除了所有不必要的代码并更改了一些内容以使其更好

【参考方案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>