如何重复执行异步函数？

嘿，我来帮你搞定这个问题~

你现在遇到的核心问题是：循环调用异步函数时没有等待前一次执行完成。你的for循环会瞬间发起10次d()调用，而d()是异步函数，这些调用会并行执行——10个d()实例同时在操作那些.image元素，它们的显示/隐藏操作互相覆盖，最后看起来就像只跑了一轮。

解决办法：让每一轮d()执行完再开始下一次 #

我们只需要在外层加上异步等待，让上一轮的轮播完全结束后，再启动下一轮。这里有两种简单的实现方式：

方式1：用异步函数包裹循环（推荐）

把外层的循环放到一个异步函数里，每次调用d()时加上await，就能保证顺序执行：

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
async function d() {
  const images = document.getElementsByClassName('image');
  for (let c = 0; c < images.length; c++) {
    images[c].style.display = 'block';
    await sleep(2000);
    images[c].style.display = 'none';
  }
}
// 控制重复执行的异步函数
async function repeatCarousel(times) {
  for (let i = 0; i < times; i++) {
    await d(); // 等待上一轮轮播完成
  }
}
// 启动10次重复
repeatCarousel(10);

方式2：立即执行的异步循环

如果不想新增函数，也可以用立即执行的异步函数来写：

// ... 这里保留sleep和d函数不变

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

补充优化说明 #

我还帮你调整了代码里的小细节：

• 把var换成了let，避免var的变量提升导致的潜在问题
• 简化了变量名（比如g改成images），让代码更易读
• 直接用images.length代替额外的变量a，减少冗余

完整代码示例 #

CSS

.image { display: none; }

HTML

<div class="image">1</div>
<div class="image">2</div>
<div class="image">3</div>
<div class="image">4</div>

这样修改后，你的轮播就会完整地重复10次，每一轮都按照1→2→3→4的顺序依次显示2秒，再隐藏，全部完成后再开始下一轮~

备注：内容来源于stack exchange，提问作者goo