如何使用javascript以设定的时间间隔动态修改样式？

Question

我试图在一定时间间隔后动态地向元素添加样式，以便单独使用 javascript 来创建动画效果。我使用了 setInterval() 并且无法清除间隔/使其停止。此外，它不会在我分配给方法的时间间隔内发生 - 动画似乎每隔一两秒发生一次。

这是我目前尝试过的代码：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);
};

如何使用javascript以设定的时间间隔动态修改样式？

How to modify styles dynamically at set intervals using javascript?

javascript

animation

delay

setinterval

clearinterval