Как остановить setInterval в цикле

1

Я пытаюсь сделать эквалайзер анимации. Я сделал функцию для начала анимации, но я не могу выполнять функцию для остановки анимации, потому что clearInterval не работает.

мой код 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>

Спасибо!

  • 0
    Не используйте интервал в цикле! Я имею в виду когда-либо. Каждый цикл начинает новый интервал, каждый повторяется, но вы останавливаете только один. Это то, что вы хотите? Если вы выполните цикл 10 раз, у вас будет 10 интервалов, каждый из которых будет повторять свой код каждые 100 миллисекунд. Поскольку вы всегда перезаписываете идентификатор интервала в переменной, вы можете остановить только один интервал.
  • 0
    хорошо, как я могу зациклить анимацию?
Теги:
setinterval
clearinterval

3 ответа

1
Лучший ответ

Вам нужно сохранить ссылку на каждый интервал в массиве, подобном этому

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)'

   }

}
0

Причина, по которой это не работает, состоит в том, что вы начинаете 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>
0

Поскольку вы создаете 5 интервалов внутри цикла for, вам необходимо остановить их отдельно.

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)'

  }

}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню