轮播图为什么最后一张会有延迟

Question

html部分：
<template>

<div class="slider" ref="slider" >
    <div ref="sliderGroup" class="sliderGroup">
    <slot></slot>
    </div>
</div>

</template>
js（vue）部分：
initSlider(){

        this.$refs.sliderGroup.style.left = `${-this.$refs.slider.clientWidth/this.$refs.sliderGroup.children.length}px`
        //计算滑动一张图需要的偏移量，这里是375px
        this.sliderLength = 0;
        //储存图片偏移量
        this.sliderPlay()
    },

sliderPlay(){

            this.sliderImg = setInterval(() => {
            this.$refs.sliderGroup.style.transition = 'left 1s'
            this.sliderLength -= `${this.$refs.slider.clientWidth/this.$refs.sliderGroup.children.length}`
            //储存偏移量
            this.$refs.sliderGroup.style.left = `${this.sliderLength}px`
            //赋值
            if(this.sliderLength == (-this.$refs.slider.clientWidth/this.$refs.sliderGroup.children.length)*6){
            //如果到最后一张
                this.$refs.sliderGroup.style.transition = 'left 0s'
                //取消动画
                this.sliderLength = 0
                this.$refs.sliderGroup.style.left = `${this.sliderLength}px`
                //移动到第一张
            }
        },1500)
    },
    
    一共五张图，原理也是采用简单的
    5 1 2 3 4 5 1
    当滑动到第五张的时候，同时取消滑动，移动到第一张即left 0px的位置，然后实现无限轮播。按理说这些操作都在一个interval里，为什么会有延迟呢？
    图片观看更明显点，有什么好的解决方式吗？
    https://i.loli.net/2019/06/19/5d0994a8e103790086.gif
    （无法直接插入图片？？）

Answer 1

我认为，你出现这个问题是因为判断这段语句导致的。
判断当前图片是否是第五张，如果是，则取消滑动，并且将图片定位在第一张（因为前后两张相同所以模拟了一个无缝滑动的效果），但由于你这一步其实只是进行了一个取消滑动和重新定位，所以这一次定时器的1s钟时间内是从右侧的“5”到了左侧的“5”，视觉效果上看上去像一个延迟。
我的处理方法是把上面的正常滑动的代码再写一份在if语句中，这样可以解决这个效果的bug。
若有不正确或者不合理的地方，欢迎指正。
若回答有帮助，求采纳~