javascript - 创建一个重复循环，其间有定时间隔

Question

我正在尝试创建一个循环，在执行下一行之前等待 5 秒。这是我在网上研究后尝试过的:

(请注意，我意识到它不会显示图像。我只想它显示警报中的文本)

setInterval(myMethod, 5000);

    function myMethod( )
    {
            alert('Image   https://website.com/t2EzsJj.png')
            alert('Image   https://website.com/TrRRE0v.png')
            alert('Image   https://website.com/vG8BkNG.png')
            alert('Image   https://website.com/uddMAhU.png')
            alert('Image   https://website.com/l9IpE9g.png')
            alert('Image   https://website.com/Lvv9S1s.png')
            alert('Image   https://website.com/od3robw.png')
            alert('Image   https://website.com/dl4HDpd.png')
            alert('Image   https://website.com/BJV4X1n.png')
            alert('Image   https://website.com/fC2HcsB.png')
            alert('Image   https://website.com/xtDuuGg.png')
            alert('Image   https://website.com/2VOBpXL.png')
            alert('Image   https://website.com/u3zKYpC.png')
            alert('Image   https://website.com/yymr6R8.png')
            alert('Image   https://website.com/cz8cZE0.png')
            alert('Image   https://website.com/rbYFSpp.png')
            alert('Image   https://website.com/zqAMDi9.png')
            alert('Image   https://website.com/Xmt84Qz.png')
            alert('Image   https://website.com/7wixIIK.png')
            alert('Image   https://website.com/Yfm3yGw.png')
            alert('Image   https://website.com/2DYKO6L.png')
            alert('Image   https://website.com/GrudZEl.png')
            alert('Image   https://website.com/OT115fy.png')
            alert('Image   https://website.com/k4bnBDa.png')
            alert('Image   https://website.com/tXTpcV8.png')
            alert('Image   https://website.com/PdkCufJ.png')
            alert('Image   https://website.com/NVaXfCV.png')
            alert('Image   https://website.com/5N69l7R.png')
            alert('Image   https://website.com/B2V8OKg.png')
            alert('Image   https://website.com/MOeIxJV.png')
    }
}

我希望代码在每个警报之间有 5 秒的间隔，所以它会是这样的:

function myMethod( )
{
        alert('Image   https://website.com/t2EzsJj.png')
        //Wait 5 seconds
        alert('Image   https://website.com/TrRRE0v.png')
        //Wait 5 seconds
        alert('Image   https://website.com/vG8BkNG.png')
        //Wait 5 seconds
        alert('Image   https://website.com/uddMAhU.png')
        //Wait 5 seconds and so on...

但是，此代码会立即运行所有警报，然后等待 5 秒并再次运行。

此外，由于所有警报都包含“Image https://website.com/”，有没有办法减少此代码的冗余？因为它被重复了很多而且只是最后一个 .png 部分正在改变？

感谢任何帮助。 谢谢，

Answer 1

将数据放入数组中，并使用setInterval()重复数组值，并使用clearInterval()打破循环。检查下面的代码片段以供引用。

var cars = ["Saab", "Volvo", "BMW"];
var i = 0;
var repeat = setInterval(function() {
  if (i == cars.length) {
    clearInterval(repeat);
    return;
  }
  myFunction(i);
  i++;
}, 1000);

function myFunction() {
  console.log(cars[i]);
}