首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在循环中停止setInterval

如何在循环中停止setInterval
EN

Stack Overflow用户
提问于 2018-08-07 02:57:59
回答 3查看 46关注 0票数 1

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

我的codepen https://codepen.io/naraxiss/pen/qyMamy

代码语言:javascript
运行
复制
var spans = document.querySelectorAll('span');
function getRandom() {
  return Math.random();
}
function scale(el){
  el.style.transform = 'scaleY(' + getRandom() +')';
}

var myInterval = null;

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

function stopMusic (interval,els){
  
  clearInterval(interval);
  //console.log(els)
  
  for(var i = 0; i < els.length; i++){
    els[i].style.stransform = 'scaleY(0.05)'
     
    }
  
}



document.querySelector('.start').addEventListener('click', function(){
  startMusic(spans);
})

document.querySelector('.finish').addEventListener('click', function(){
  stopMusic(myInterval,spans);
})
代码语言:javascript
运行
复制
body{
  margin: 0;
  
}

span{
  display: inline-block;
  width: 50px;
  height: 300px;
  background-color: #000;
  margin-right: 10px;
  transition: 0.1s linear;
  transform: scaleY(0.005);
  transform-origin: bottom;
}

.equalizer{
  position: absolute;
  top: 50%;
  left: 40%;
  transform: translate(-50%,-50%);
}
代码语言:javascript
运行
复制
<div class="equalizer">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>
<button class="start">START</button>
<button class="finish">FINISH</button>

谢谢!

EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51714024

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档