jQuery setInterval() 每 5 秒自动刷新 div 元素答案

【问题标题】：jQuery setInterval() auto refresh div element per 5 secondsjQuery setInterval() 每 5 秒自动刷新 div 元素
【发布时间】：2021-04-21 01:14:00
【问题描述】：

我想每 5 秒刷新一次左 div。整个项目就是用$.ajax获取JSON数据，然后在左边显示4个随机元素。左边的 div 块确实刷新了，但内容没有改变。总是相同的图像。 enter image description here

我尝试 console.log 随机索引，每 5 秒不同。为什么新创建的 html 元素仍然是一样的，虽然随机索引已经改变了？？？ enter image description here

setInterval(getRandomEles, 5000);

function getRandomEles() {

  if ($('#left').children().length < 4) {

    for (var i = 0; i < 4; i++) {
      var idx = Math.floor((Math.random() * arrayImg.length));
      randomArrayImg.push(arrayImg[idx]);
    }

    var leftHtml = '';
    for (var i = 0; i < 4; i++) {
      leftHtml += '<div class="card gallery-map"><img class="card-img-top flex-gallery" src="' + randomArrayImg[i]['image_url'] +
        '" alt=" "><div class="card-body"><p class="card-text">' + randomArrayImg[i]['artiste'] + '</p></div></div>';
    }

    var leftDom = $('#left').append(leftHtml);

  } else {
    $('#left').children().remove();
  }
}

HTML如下：

    <main>
    <div class="row">
        <div id="left"></div>
        <div id="right"></div>
    </div>
</main>

【问题讨论】：

你好，严，我知道情况，但有什么问题？
我添加了它。 tks

标签： javascript jquery ajax

【解决方案1】：

因为你不断将arrayImg[idx] 推入randomArrayImg 但是你在刷新后没有清除randomArrayImg，所以

randomArrayImg[0]
randomArrayImg[1]
randomArrayImg[2]
randomArrayImg[3]

保持不变

我不知道你是怎么声明randomArrayImg的，所以这是一个通用的方法来删除数组内的所有项目

else {
    $('#left').children().remove();
    while(randomArrayImg.length > 0) { //add this
        randomArrayImg.pop();          //add this
    }                                  //add this
}

或者您可以使用自己的方法更智能地清除它

【讨论】：