javascript - 在 animate settimeout 之后执行函数

Question

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

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

如何编辑代码，使其成为一个有用的计时器，即它“用完了”？

(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)
})();

Answer 1

您可以通过检查 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);
  }
})();