如何在循环中停止setInterval
如何在循环中停止setInterval
提问于 2018-08-07 02:57:59
我试着做均衡器动画。我做了开始动画的功能，但我不能做停止动画的功能，因为clearInterval不工作。
我的codepen https://codepen.io/naraxiss/pen/qyMamy
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);
})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%);
}<div class="equalizer">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<button class="start">START</button>
<button class="finish">FINISH</button>
谢谢!
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-08-07 03:14:16
您需要在数组中保存每个间隔的引用，如下所示
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);
}
}然后在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)'
}
}Stack Overflow用户
发布于 2018-08-07 03:10:55
因为您在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)'
}
}Stack Overflow用户
发布于 2018-08-07 03:13:23
它不起作用的原因是因为你开始了5个间隔，但只停止了1个。把间隔放在一个数组中，这样你就可以循环它们并停止它们。请参阅下面的更改。
var spans = document.querySelectorAll('span');
function getRandom() {
return Math.random();
}
function scale(el){
el.style.transform = 'scaleY(' + getRandom() +')';
}
var myIntervals = [];
function startMusic (spans){
var el = spans;
for(var i = 0; i < el.length; i++){
(function(i) {
myIntervals[i] = setInterval(function(){
scale(el[i]);
}, 100);
})(i);
}
}
function stopMusic (intervals,els){
//clearInterval(interval);
//console.log(els)
for(var i = 0; i < els.length; i++){
clearInterval(intervals[i]);
els[i].style.stransform = 'scaleY(0.05)'
}
}
document.querySelector('.start').addEventListener('click', function(){
startMusic(spans);
})
document.querySelector('.finish').addEventListener('click', function(){
stopMusic(myIntervals,spans);
})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%);
}<div class="equalizer">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<button class="start">START</button>
<button class="finish">FINISH</button>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51714024
复制相关文章
相似问题