在动画settimeout之后执行一个函数

Found this on stack overflow the other day http://codepen.io/anon/pen/LERrGG.

前几天在堆栈上发现这个溢出http://codepen.io/anon/pen/LERrGG。

I think this is a great pen that could be really useful. The only problem is that there is no ability to call a function after the timer runs out. I was trying to implement this with no success.

我认为这是一支非常棒的笔。唯一的问题是在计时器用完后无法调用函数。我试图实现这一点但没有成功。

How do I edit the code so that it becomes a useful timer i.e. it 'runs out'?

如何编辑代码使其成为一个有用的计时器,即它“用尽”?

(function animate() {
  theta += 0.5;
  theta %= 360;
  var x = Math.sin(theta * Math.PI / 180) * radius;
  var y = Math.cos(theta * Math.PI / 180) * -radius;
  var d = 'M0,0 v' + -radius + 'A' + radius + ',' + radius + ' 1 ' + ((theta > 180) ? 1 : 0) + ',1 ' + x + ',' + y + 'z';
  timer.setAttribute('d', d);
  setTimeout(animate, t)
})();

2 个解决方案

#1

You can determine that a complete circle has been painted by checking to see if theta ends up smaller than when it started out:

您可以通过检查theta是否小于它开始时的最小值来确定是否已绘制完整的圆:

(function animate() {
  var oldTheta = theta;
  theta += 0.5;
  theta %= 360;
  if (theta < oldTheta) {
    // the timer has "run out"
  }
  else {
    var x = Math.sin(theta * Math.PI / 180) * radius;
    var y = Math.cos(theta * Math.PI / 180) * -radius;
    var d = 'M0,0 v' + -radius + 'A' + radius + ',' + radius + ' 1 ' + ((theta > 180) ? 1 : 0) + ',1 ' + x + ',' + y + 'z';
    timer.setAttribute('d', d);
    setTimeout(animate, t);
  }
})();

#2

you have to check if theta smaller than 360.

你必须检查theta是否小于360。

  (function animate() {
  theta += 0.5;
  var x = Math.sin(theta * Math.PI / 180) * radius;
  var y = Math.cos(theta * Math.PI / 180) * -radius;
  var d = 'M0,0 v' + -radius + 'A' + radius + ',' + radius + ' 1 ' + ((theta > 180) ? 1 : 0) + ',1 ' + x + ',' + y + 'z';
  timer.setAttribute('d', d);
 if(theta<360) setTimeout(animate, t);
 else doSomething();
})();

#1