Как остановить цикл JavaScript for с помощью append

#javascript #jquery #arrays #for-loop #infinite-scroll

#javascript #jquery #массивы #for-цикл #бесконечная прокрутка

Вопрос:

У меня проблема при использовании for и отображении данных с помощью append. Прокрутка вниз и добавление 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) amp;amp; !isExecuted) {
    isExecuted = true;
    var fromItem = $("#testDiv").children().length;

    for (var i = fromItem;
      (i < fromItem   7) amp;amp; (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>

Ответ №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

Ответ №2:

Просто добавьте два условия, здесь у вас есть ссылка

 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) amp;amp; !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) amp;amp; (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>