创建一个for循环,该循环循环==

时间:2020-01-12 14:07:11

标签: javascript arrays loops

所以我有一个奇怪的问题(因为我可以使用伪代码来做到这一点,但不能使其在我的实际代码中起作用)-

这个概念很简单-我需要一个for循环,当达到最大“ I”数字时,它会再次将“ I”还原为0,并一遍又一遍地创建循环-

虚拟代码:

for(i=0;i<10;i++){
console.log(i);
if(i === 10){
i = 0
}
}

现在输入较长的代码(对不起)

    function reviewF(){

  // add ID to each of the objects 

reviews.forEach((e, i)=>{
    e.id = i
})


    // get the elements to be populated on page
    var name = document.querySelector('p.name');
    var date = document.querySelector('p.date');
    var rating = document.querySelector('.rating_stars');

    var review = document.querySelector('p.review_content_text');

    // reverse the array - so the newest reviews are shown first (this is due to how the reviews where downloaded)
    var reviewBack = reviews.slice(0).reverse();



    // start the loop - go over each array - take its details and apply it to the elements

    /**
     * THIS IS WHAT I WOULD LIKE TO LOOP OVER FOREVER 
     * 
     * **/ 
    for (let i = 0; i < reviewBack.length; i++) {


      (function(index) {
        setTimeout(function() {
        // document.getElementById('reviews').classList.remove('slideOut')
        name.classList.remove('slideOut')
        date.classList.remove('slideOut')
        rating.classList.remove('slideOut')
        review.classList.remove('slideOut')
        name.classList.add('slideIn')
        date.classList.add('slideIn')
        rating.classList.add('slideIn')
        review.classList.add('slideIn')


            name.innerHTML = reviewBack[i].aditional_info_name;
            date.innerHTML = reviewBack[i].Date;
            rating.innerHTML = '';
            review.innerHTML = reviewBack[i].aditional_info_short_testimonial;
            if(reviewBack[i].aditional_info_short_testimonial === 'none'){
                reviewBack.innerHTML='';
            } 

            var numberOfStars = reviewBack[i].aditional_info_rating;

            for(i=0;i<numberOfStars;i++){
                var star = document.createElement('p');
                star.className="stars";
                rating.appendChild(star);
            }


            setTimeout(function(){
                // document.getElementById('reviews').classList.add('slideOut')
                name.classList.add('slideOut')
                 date.classList.add('slideOut')
                 rating.classList.add('slideOut')
                 review.classList.add('slideOut')
            },9600)
        }, i * 10000)
      })(i);
      // should create a infinite loop
    }
    console.log('Loop A')
  }


  // both functions are running as they should but the time out function for the delay of the transition is not?

  reviewF();

编辑>>>>>>>>

好吧,所以我找到了一种解决问题的方法-但它不是干代码,也不是好的代码,但是可以工作....

这可能会使想要的效果更容易理解

reviewF(); // <<< this is the init function

  // this init2 function for the reviews waits until the reviews have run then 
  // calls it again
  setTimeout(function(){
    reviewF();
  }, reviews.length*1000)
  // this version of the innit doubles the number of reviews and calls it after that amount of time
  setTimeout(function(){
    reviewF();
  }, (reviews.length*2)*1000)

通过尝试多种方法来解决此问题,我注意到的是,当我将console.log('Finished')放置在函数的末尾并连续两次调用它时(试图堆叠正在运行的函数) .....是的,我知道尝试解决问题的一种恐怖而直截了当的方法,但是我已经到了这一点)-它在功能仍在运行时由console.log调用(即,设置超时部分尚未完成) )-可能与此有关。

我对粗糙代码表示歉意。

这里的任何帮助都是非常有用的,因为我自己解决该问题的尝试都还不够,我相信我可能会错过代码运行方式的某些东西?

热烈的问候, W

2 个答案:

答案 0 :(得分:0)

为什么不简单地将此for循环嵌套在do/while中?

var looping = True
do {
    for(i=0;i<10;i++){
        console.log(i);
    }

    if (someEndCondition) {
         looping = False;
    }
}
while (looping);

答案 1 :(得分:0)

我认为重置循环就像在伪代码中设置“ i = 0”一样简单。因此,尝试将以下内容放入for循环的末尾:

    if(i === 10){
     i = 0;
    }