JavaScript显示一定时间段内的数组元素

Question

我是 JavaScript 的新手，正在做一些练习。我正在尝试创建一个练习，在该练习中，一旦页面一次加载一个，每次 5 秒，就会显示客户评论。每个评论都是一个对象数组元素。所以我想弄清楚如何遍历对象数组并每个元素显示 5 秒。我做了一些研究，这就是我能想到的。我什至接近？

<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>

Answer 1

一般来说，如果您希望某事按设定的时间间隔发生，setInterval 是比 setTimeout 更好的选择。您可以直接启动它并让它运行而不会出现与 for 循环中的超时相关的问题。

我在这里稍微更改了您的代码，使 customerReviews 成为一个包含评论对象的真实数组，这些评论对象具有评论者的姓名和评论本身作为属性。然后这是运行ning 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>

JavaScript显示一定时间段内的数组元素

JavaScript display array elements within certain time period

javascript

arrays

jquery

display