使用setTimeout模拟setInterval时，用clearTimeout清除多余的调用

Question

使用setTimeout模拟setInterval时，使用clearTimeout清除多余的调用，为什么运动直接停止了？

html:`

css:

js:

如果我把setTimeout(startMove,200);放在位置1，那么运动很正常，我不停的点击button，运动也不会变快或者停止。
但是如果我把setTimeout(startMove,200);放在位置2，那在我点击第二次button的时候，运动会直接停止，而且不会再继续运动了。

想请问一下，为什么会发生这种情况？就算我点击了button，前一个setTimeout被清除了，不应该在20毫秒后，又会出现一个新的setTimeout吗？

希望有高手可以解答，非常感谢！

Answer 1

位置2出问题是因为多次点击会导致多次触发setTimeout(startMove,200)，然后会在200ms内不断clearTimeout(timer)和给timer赋值setTimeout，导致动画失效。