Javascript 如何使用setInterval和clearInterval获得延迟工作

我正在编写一个代码段，其中JS将数组的所有元素显示为计数器，循环中的每一步之间有随机延迟。但是，

clearInterval

和

setInterval

似乎不起作用，因为我观察到它会在浏览器控制台中永远打印值

这是密码

var low = Math.floor(Math.random() * (80 - 65 + 1)) + 65;
var high = Math.floor(Math.random() * (95 - low + 1)) + low;
// generate array between low to high
heartbeats = Array.from( {length: 15}, () => Math.floor(Math.random() * (high - low + 1)) + low );
// sort it
heartbeats = heartbeats.sort((a,b) => a - b);
for (i in heartbeats){
   var randomPause = Math.floor(Math.random() * (3000 - 1000 + 1)) + 1000;
   theLooper = setInterval( function () {
   if (i == (heartbeats.length - 1) ) clearInterval(theLooper);
   console.log("Random Pause Is :: " + randomPause);
   console.log(heartbeats[i]);
   name1.innerHTML = heartbeats[i];
   },randomPause);
}

---

我得到的不是计数器而是先低后高的打印，而不是打印数组中的所有元素。控制台日志一直打印得很高

问题

我认为是您的变量范围导致了这个问题

解决方案

将（心跳中的i）的

更改为
（心跳中的i）
，否则setInterval回调中的
i
将始终是数组的最后一个索引

详细的文件可以在这里找到

问题：

事实上，在实际的代码中，您并不是在一个接一个的延迟之后打印数组的值，而是在延迟传递之后打印banch中的所有元素

当您使用
setInterval
时，显示不会停止，它将永远显示

解决方案：

您需要使用
setTimeout
，在
循环中，它将延迟指令一次，而不是
setInterval
，并确保根据迭代的
索引增加
setTimeout
函数的延迟使用：

setTimeout(function() {
   console.log("index: " + i + " & element: " + el);
}, i * 1000);

演示：

这是一个演示片段：


var low=Math.floor（Math.random（）*（80-65+1））+65；
var高=数学地板（数学随机（）*（95-低+1））+低；
//在低到高之间生成阵列
heartbeats=Array.from({
长度：15
}，（）=>Math.floor（Math.random（）*（高-低+1））+low）；
//分类
heartbeats=heartbeats.sort（（a，b）=>a-b）；
心跳。forEach（函数（el，i）{
setTimeout（函数（）{
日志（“索引：+i+”&元素：+el）；
}，i*1000）；
});什么是活套。长度setInterval就是这样做的，不断重复，直到你停止它。您设置了15个间隔。
looper
是原始数组，我放了一个片段，这是一个输入错误