无限滚动，transiton小bug怎么修复

Question

要显示5张图 ，布置5123451 7张图
实际思路上就是最后一张滚到第一张实际是顺着滚，动画结束再取消transition切回第一张再附加transition
现在我遇到这个个问题

/...5->1执行的代码（有滚动动画）.../
 if (newLeft === -3600) { 
      setTimeout(function () {
        list.style.transition = 'none'; //取消动画
        list.style.left = -600 + 'px'; //瞬间回滚
        list.style.transition = 'left 2s linear';//恢复动画 //但是这句话回滚的时候会生效是为什么
      },2000)

这么写回滚的时候动画会生效
必须要用下面的写法，第二个计时器必须大于2000几个毫秒才满足需求,
为什么会发生这种事情，计时器里面回调函数应该是同步的呀， list.style.left = -600 + 'px';不执行完后面应该是不会设置动画的呀？

if (newLeft === -3600) {
      setTimeout(function () {
        list.style.transition = 'none';
        list.style.left = -600 + 'px';
      },2000)
      setTimeout(function () {
                list.style.transition = 'left 2s linear';
      },2020)

• 这里我发现：间隔时间1-4秒基本没用给，间隔10ms偶尔会出现回滚动画，设置20ms基本没问题
  实际上还是刚刚的问题，js是单线程，会阻塞，2000ms执行的代码如果不执行完，2010ms是不会把异步代码拿来执行的，如果执行完了，那么我这个回滚应该是没有动画的。求大神解释一下

