Как динамически изменять стили с заданными интервалами с помощью javascript?

Question

Я пытаюсь динамически добавлять стили к элементу через определенные промежутки времени, чтобы создать эффект анимации, используя только javascript. Я использовал setInterval() и не могу очиститьInterval/остановить его. Кроме того, это не происходит с интервалов, которые я назначаю методу - анимация, кажется, происходит каждую одну или две секунды.

Вот код для того, что я пытался до сих пор: http://codepen.io/AnkitaSood/pen/jyaqMR?editors=0010

Ниже логика, что мне нужна помощь -

Object.keys(styles).forEach(function(key) { 
    for(index = 0 ; index < styles[key].length; index++) { 
     var intervals = setInterval(function(index) { 
     elem.style[key] = styles[key][index]; 
     }, timer[index], index); 
    } 
    clearInterval(intervals); 
    }); 

Answer 1

Причина ваш код не работает, потому что только в прошлом intervals очищено (ваш код продолжает отменять его). Но даже если вы исправите это, он не будет работать так, как вы ожидаете, поскольку clearInterval может сразу очистить интервал еще до того, как произойдут изменения.

Так что я предлагаю setTimeout вместо:

this.animate = function() { 
    for(index = 0 ; index < timer.length; index++) { 
     setTimeout(function(index) { 
     for (var key in styles) { 
      elem.style[key] = styles[key][index]; 
     } 
     }, timer[index], index); 
    } 
}; 

Answer 2

Я думаю, что проблема в том, что вы вызываете setInterval внутри цикла. Вам не нужно это делать, потому что один звонок setInterval уже настроен для вас (он будет продолжать вызывать ваш обратный вызов каждые x миллисекунд). Ваш код на самом деле начинает пучок интервалов, и вам, вероятно, нужен только один.

я изменил его немного, как это и есть некоторые разумные результаты:

this.animate = function() { 
    var i = 0; 

    setInterval(function() { 
     elem.style['width'] = config.styles.width[i]; 
     elem.style['backgroundColor'] = config.styles.backgroundColor[i]; 
     i = ++i % 6; 
    }, 1000); 
}; 

Это просто запускает анимацию снова и снова, но, надеюсь, это показывает, как он может работать. Если вы хотите остановить интервал после определенного числа циклов, вы можете сделать что-то вроде этого:

this.animate = function() { 
    var i = 0; 

    var intId = setInterval(function() { 
     elem.style['width'] = config.styles.width[i]; 
     elem.style['backgroundColor'] = config.styles.backgroundColor[i]; 

     if(++i >= 6) { 
     clearInterval(intId); 
     } 
    }, 1000); 
};