时间戳

首页 > 解决方案 > 在jquery中，如何循环每个div，并显示每个div 10秒，然后隐藏

javascript - 在jquery中，如何循环每个div，并显示每个div 10秒，然后隐藏

问题描述

<div id='a'> Apple </div>
<div id='b'> Berry </div>
<div id='c'> Cherry </div>

$(document).ready(function () {
    $(#a).hide;
    $(#b).hide;
    $(#c).hide;

    var arr = ["a", "b", "c"];
    var i;
    for (i = 0; i < 10; i++) {
        for (j = 0; j < arr.length; i++) {
            setInterval(function(){ arr[j].show(); }, 10 * 1000);
            arr[j].hide();
        }                
    }
});

步骤：隐藏所有 div。循环 10 次。显示每个 div 10 秒，然后隐藏。

在这个例子中，有 3 个 div。可能有更多或更少的div。所以我猜需要某种数组。

标签： javascriptjquery

解决方案

获取所有 div，使用setTimeOut内部承诺并在指定时间完成后解决承诺。

在内部，维护一个将循环setTimeout的索引变量，并将index 设置为一旦其值小于 div 的长度（从第一个 div 开始循环）。idivizero

let prevDiv = null;

const divs = document.querySelectorAll('div');
const length = divs.length;

let i = 0;

const delay = function() {
  return new Promise((resolve) => {
    setTimeout(() => {
      if (prevDiv) {
        prevDiv.classList.remove('active');
        prevDiv.classList.add('hide');
      }
      i = i < divs.length ? i : 0;
      divs[i].classList.remove('hide');
      divs[i].classList.add('active');
      prevDiv = divs[i];
      i++;
      resolve();
    }, 1000);
  });
}

async function calc() {
  for (let i = 0; i < 10; i++) {
    await delay();
  }
}

calc();
.active {
  display: block;
}

.hide {
  display: none;
}
<div id='a' class="hide"> Apple </div>
<div id='b' class="hide"> Berry </div>
<div id='c' class="hide"> Cherry </div>

推荐阅读