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秒钟再次运行它。

此外，由于所有警报都包含＆＃34;图像https://website.com/＆＃34;有没有办法减少这些代码的冗余？因为它重复了很多，而最后一个.png部分正在改变？

感谢任何帮助。谢谢，

Answer 1

将您的数据放入array并使用setInterval()重复数组值并使用clearInterval()来打破循环。请查看以下代码段以供参考。

＆＃13;

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]);
}

＆＃13;

Answer 2

试试这个：

＆＃13;

const INTERVAL_IN_MS = 5000, // 5 seconds
  imageIds = ['t2EzsJj', 'OT115fy', '5N69l7R']; // put all image IDs into this array
    
imageIds.forEach((imageId, index) => {
  setTimeout(() => {
    alert(`Image https://website.com/${imageId}.png`);
  }, index * INTERVAL_IN_MS);
});

＆＃13;

此循环的每次迭代都会推迟5 * index秒的函数调用。由于数组元素的索引为0, 1, 2...，因此这些函数将在0, 5, 10...秒内运行。查看setTimeout documentation。

至于我setTimeout在这种情况下比setInterval更简单，因为你不需要在数组末尾clearInterval()。

为了减少代码冗余，可以存储仅包含图像ID的数组。

Answer 3

创建一个包含图像名称的数组（请注意，我只添加了2个名称，但您应填写其余名称）：

let images = ["t2EzsJj.png", "TrRRE0v.png"];

现在使用setInterval：

let intervalId = setInterval(function () {
  if (images.length === 0){
    clearInterval(intervalId);
    return;
  }
  // this remove the first image from the array and return it
  let imageName = images.splice(0, 1); 
  alert(`Image   https://website.com/${imageName}`)
}, 5000)

在两者之间创建具有定时间隔的重复循环

3 个答案: