JavaScript display array elements within certain time period

Question

I'm relatively new to JavaScript and working on some exercises. I'm trying to create an exercise where customer review display once the page loads one at a time 5 seconds each. The reviews are each an object array element. So I'm trying to figure out how to loop through the object array and display each element 5 seconds each. I've done some research and this is all I could come up with. Am I even close?

<script>
  var customerReviews = {
    "Denise Wilson": [
      "I absolutely love this restaurant! The food is amazing. The atmosphere
      is so welcoming."
    ],
    "Russell Brown": [
      "Enid's restaurant is the best place in town. Great food, nice staff
      and
      very clean spot."
    ],
    "Dana Evans": [
      "Came here for the 1st time and must say I'm impressed. Will definitely
      be coming back. Enjoyed myself."
    ],
    "Bilal Scott": [
      "Been coming here since I was a child. Loved it then and still love it
      now. The best!"
    ]
  };

  function showCustomerReviews(){
    for (i = 0; i < userWord.length; i++){
      setTimeout(function () { .show(customerReviews[i]); }, 5000);
    }
  }
</script>

HTML

<body onload="showCustomerReviews()">
  <div id="reviewsPage">
    <h2>Check out Enid's Restaurant Customer Reviews below</h2>
    <div id="reviewsBox">
      <p>Enid's Customer Reviews</p>
      <p id="displayReviews"></p>
    </div>
  </div>

You have a bunch of issues with your code.You have the infanous for loop bug https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example, you have it where all the timeouts will execute at exactly 5 seconds, and you have a bug with whatever `.show()` is — epascarello, Sep 06 '18 at 20:00
You have line breaks between your quoted strings, is your actual code like that? This will give you a syntax error (invalid or unexpected token). I have fixed your code formatting but left that error as is. — u-ways, Sep 06 '18 at 20:13

score 2 · Accepted Answer · answered Sep 06 '18 at 20:18

In general, if you want something to occur at a set interval, setInterval is a better alternative to setTimeout. You can just start it and let it run without the problems associated with timeouts in for loops.

Here I've changed your code a bit to make customerReviews a real array containing review objects that have the name of the reviewer and the review itself as properties. Then it's a simple matter of running setInterval() and incrementing the index. To make it loop, this takes the index mod % array.length

If you want to stop it you can use clearInterval

var customerReviews = [
    {   
        name: "Denise Wilson",
        review:"I absolutely love this restaurant! The food is amazing. The atmosphere is so welcoming."
    },
    {   
        name: "Russell Brown",
        review: "Enid's restaurant is the best place in town. Great food, nice staff and very clean spot."
    },
    { 
        name: "Dana Evans",
        review: "Came here for the 1st time and must say I'm impressed. Will definitely be coming back. Enjoyed myself."
    },
    {   
        name: "Bilal Scott",
        review: "Been coming here since I was a child. Loved it then and still love it now. The best!"
    }
];


function showCustomerReviews(){
      let i = 0
      // set initial review
      let review = customerReviews[i++ % customerReviews.length]
      $('#displayReviews').text(review.name + ": " + review.review);
      
      // change it on interval
      setInterval(function(){
        let review = customerReviews[i++ % customerReviews.length]
        $('#displayReviews').text(review.name + ": " + review.review);
        }, 5000);
    }
showCustomerReviews()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="reviewsPage">
<h2>Check out Enid's Restaurant Customer Reviews below</h2>
<div id="reviewsBox">
<p>Enid's Customer Reviews</p>
<p id="displayReviews"></p>
</div>
</div>

This is a great answer and thank you for the example. I needed something similar and ran across this and it is an outstanding solution. BTW, nice use of the modulus operator to control the array index! — Casa de Spider, Feb 05 '22 at 19:44

JavaScript display array elements within certain time period

1 Answers1