Question

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

以下是我迄今为止尝试过的代码：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以设定的间隔动态修改样式？

2 个答案: