写了一个简单的轮播碰到一些问题求指导

function rollAmn() {
    var length = 0
    var oRoll = document.querySelector('.header')

    setInterval(function () {
      if (length == -300) {
        length = 0
        /* 注释一
        oRoll.classList.remove('roll')
        oRoll.style.left = length + '%'
        */
      }
      length += -100
      /* 注释二
      oRoll.classList.add('roll')
      oRoll.style.left = length + '%'
      */
    }, 2000)

  }

四张图，第四张和第一张是同一张，想法是if到达第四张时去除transition属性然后left归0回到初始状态，但是貌似是js代码执行过快的原因注释一的代码虽然执行了但接着执行了注释二的代码浏览器直接渲染注释二执行后的状态，于是在到达第四张时下一个动作是直接往左滑动回到{left：-100%}也就是第二张的状态，如果打断点一步步执行时能达成无缝滑动的

于是我就把if的判定放到注释二下面，判定条件改为if（length = -400）但这样第四张图和第一张图都等待了2s，给人造成了一种有一张图等待时间会更长些的错觉，如果每张图等待时间是5s就容易出破绽了

请问这种中间改变样式代码无法被渲染的问题以及多2s等待的问题有什么解决办法吗？

好了大概修改成功过的代码是这样：

function rollAmn() {

    var length = 0
    var oRoll = document.querySelector('.header')
    var nImgLength = -(document.querySelectorAll('.header li').length - 1) * 100

    setInterval(function () {
      length += -100     
      oRoll.style.left = length + '%'

      if (length === nImgLength) {
      
        setTimeout(function () {
          length = 0
          oRoll.classList.remove('roll')
          oRoll.style.left = '0'         
        }, 500)
        
        oRoll.classList.add('roll')

      }

    }, 4000)

  }