Javascript 如何停止循环中的setInterval

我正在尝试做均衡器动画。我做了开始动画的功能，但我不能做停止动画的功能，因为clearInterval不工作

我的密码笔

var span=document.querySelectorAll（'span'）；
函数getRandom（）{
返回Math.random（）；
}
功能量表（el）{
el.style.transform='scaleY（'+getRandom（）+'）；
}
var myInterval=null；
功能开始音乐（跨度）{
var el=跨度；
对于（变量i=0；i

正文{
保证金：0；
}
跨度{
显示：内联块；
宽度：50px；
高度：300px；
背景色：#000；
右边距：10px；
过渡：0.1s线性；
转换：scaleY（0.005）；
变换原点：底部；
}
.均衡器{
位置：绝对位置；
最高：50%；
左：40%；
转换：翻译（-50%，-50%）；
}

开始
完成

因为在for循环中创建了5个间隔，所以需要分别停止它们

var spans = document.querySelectorAll('span');

function getRandom() {
  return Math.random();
}

function scale(el) {
  el.style.transform = 'scaleY(' + getRandom() + ')';
}

var myInterval = []; // <------------------------ Make it an array

function startMusic(spans) {
  var el = spans;
  for (var i = 0; i < el.length; i++) {
    (function(i) {
      myInterval.push(setInterval(function() { // <------------- push every item 
        scale(el[i]);
      }, 100));
      console.log(myInterval)
    })(i);
  }
}

function stopMusic(els) {
  for (var x = 0; x < myInterval.length; x++) {
    clearInterval(myInterval[x]); // <--------------------- Access every item to clear
  }
  console.log(els)

  for (var i = 0; i < els.length; i++) {
    els[i].style.stransform = 'scaleY(0.05)'

  }

}

var span=document.querySelectorAll（'span'）；
函数getRandom（）{
返回Math.random（）；
}
功能量表（el）{
el.style.transform='scaleY（'+getRandom（）+'）；
}
var myInterval=[]；// 它不起作用的原因是，你开始5次间隔，但只停止1次。将间隔放在一个数组中，这样就可以循环它们并停止它们。请参阅下面的更改


var span=document.querySelectorAll（'span'）；
函数getRandom（）{
返回Math.random（）；
}
功能量表（el）{
el.style.transform='scaleY（'+getRandom（）+'）；
}
var MyInterval=[]；
功能开始音乐（跨度）{
var el=跨度；
对于（变量i=0；i

正文{
保证金：0；
}
跨度{
显示：内联块；
宽度：50px；
高度：300px；
背景色：#000；
右边距：10px；
过渡：0.1s线性；
转换：scaleY（0.005）；
变换原点：底部；
}
.均衡器{
位置：绝对位置；
最高：50%；
左：40%；
转换：翻译（-50%，-50%）；
}

开始
完成
您需要将每个间隔的引用保存在如下数组中

var myInterval = [];
function startMusic (spans){
  var el = spans;
  for(var i = 0; i < el.length; i++){
      (function(i) {
            let interval = setInterval(function(){
              scale(el[i]);
            }, 100);
            myInterval.push(interval);
      })(i);
    }  
}

var myInterval=[]；
功能开始音乐（跨度）{
var el=跨度；
对于（变量i=0；i

然后在stopMusic功能中清除所有像这样的间隔

function stopMusic (interval,els){

  interval.forEach(inter => clearInterval(inter));
  console.log(els)

  for(var i = 0; i < els.length; i++){
    els[i].style.stransform = 'scaleY(0.05)'

   }

}

功能停止音乐（间隔，els）{
forEach（inter=>clearInterval（inter））；
控制台日志（els）
对于（变量i=0；i
不要在循环中使用间隔！我是说永远。每个循环开始一个新的间隔，每个循环重复，但您只停止一个循环。这就是你想要的吗？如果循环10次，将有10个间隔，每个间隔每100毫秒重复一次代码。由于始终覆盖变量中的间隔ID，因此只能停止一个间隔。确定如何循环动画吗？