前端跑马灯效果中，定时器间隔与动画效果时长相同而产生的bug

Question

我写了个跑马灯，设定的动画效果3秒，定时器3秒
我希望动画效果结束后立即执行定时器回调以达到无停顿的效果
结果每次动画结束都会有3秒的停顿。
但如果将定时器延时设定为3100ms则只会有0.1秒停顿。想知道产生的原因是什么？

代码：http://js.jirengu.com/yusojivani/1/edit?html,js,output

个人猜测是transitionend的回调把定时器内的动画取消了，那么到第三秒的时候定时器回调和事件回调哪个先执行？

Answer 1

1. setTimeout即使不加时间参数，系统还是为给出一个默认值，给0也是，不是立即执行的意思
2. transitionend回调在setInterval后调用，定时器函数在事件循环中总是优先被执行
3. 要想更好的控制走马灯效果-无缝循环效果，试试@keyframes

试试下面代码的效果:)

const scroller = $('.scroller')
const wrapper = $('.wrapper')[0] //拿到HTML元素
let hasNext=true;
const move = () => {
    wrapper.style.transform = `translateX(-242px)`
    wrapper.style.transition = `transform 3s linear`
    $(wrapper).on('transitionend', (e) => {
        wrapper.style.transition = `transform 0s`
        wrapper.style.transform = `translateX(0)`
        $(wrapper).unbind('transitionend');
        //下面代码如果修改为hasNext&&move();
        //将会出现停止的情况，因为立马调用move导致新样式还没有应用到DOM元素上，前后样式相同，没有transition效果
        hasNext&&setTimeout(move);
    })
}
let timer
scroller.on('mouseenter', (e) => {
  //setTimeout(move)
  move();
  hasNext = true
  //timer = setInterval(move, 3000)
})
scroller.on('mouseleave', (e) => {
  //clearInterval(timer)
  hasNext = false;
})

Answer 2

let timer
scroller.on('mouseenter', (e) => {
timer = setInterval(move, 0)
})
scroller.on('mouseleave', (e) => {

clearInterval(timer)

})