时间戳

首页 > 解决方案 > JavaScript display array elements within certain time period

javascript - JavaScript display array elements within certain time period

问题描述

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>

标签： javascriptjqueryarraysdisplay

解决方案

通常，如果您希望某事以设定的时间间隔发生，setInterval是setTimeout. 您可以启动它并让它运行，而不会出现与for循环超时相关的问题。

在这里，我对您的代码进行了一些更改，以创建customerReviews一个包含评论对象的真实数组，这些对象具有评论者的姓名和评论本身作为属性。然后就是运行setInterval()和增加索引的简单问题。为了让它循环，这需要索引 mod% array.length

如果你想停止它，你可以使用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>

推荐阅读