swiper轮播和setInterval发生混乱

小小白前来探路

如图：这块id="rycr"的代码是我用js方法拼接进去的，所以new swiper()就放在了js方法里面，但是这块div是要定时刷新的，所以就给了定时器刷新，但是div没5秒刷新后轮播图的播放就会出现问题，问题大概情况：轮播图5秒后从头开始轮播，但是轮播时也会轮播定时器执行前的那个轮播位置，导致轮播过程穿插。求解答


window.setInterval(gdt,1000*5);function gdt() {
    $.ajax({
        url:"/other/gdPersonnelAccess",
        type:"POST",
        success:function (result) {
            if(result.success){
                var rycrs = result.data.personnel;//人员出入
                var mgjjs = result.data.dutyManage;//门岗交接
                var rucrContent = "";//人员出入
                var mgjjsContent = "";//门岗交接
                $.each(rycrs,function (i, rycr) {
                    rucrContent += '<div class="swiper-slide">';
                    rucrContent += '<div class="top_ma">';
                    rucrContent += '<b>'+rycr.name+'</b></div>';
                    rucrContent += '<img width="90%" src="'+rycr.picUrl+'" /></div>';
                });
                $("#rycr").html(rucrContent);
                var mySwiper = new Swiper('.swiper-container', {
                    loop: true,
                    autoplay: 2000,
                    slidesPerView: 2,
                    preloadImages:false,
                    observer:true,
                    observeParents:true,
                    observeSlideChildren:true,
                })
                console.log(rucrContent);
                $.each(mgjjs,function (i, mgjj) {
                    mgjjsContent += '<div class="swiper-slide">';
                    mgjjsContent += '<div class="top_ma">';
                    mgjjsContent += '<b>'+mgjj.dutyUser+'</b></div>';
                    mgjjsContent += '<img width="90%" src="'+mgjj.picUrl+'" /></div>';
                });
                $("#mgjj").html(mgjjsContent);
                var mySwiper = new Swiper('.swiper-height', {
                    loop: true,
                    autoplay: 2000,
                    slidesPerView: 2,
                    preloadImages:false,
                    observer:true,
                    observeParents:true,
                    observeSlideChildren:true,
                })

            } else {
                layer.msg("滚动图查询失败",{time: 2000, icon: 5, shift: 6},function(){

                });
            }
        },
        error:function () {
            layer.msg("滚动图请求失败",{time: 2000, icon: 5, shift: 6},function(){

            });
        }
    });
}

小小白前来探路

就是轮播切换不正常，是因为swiper和setinterval的原因吗，该如何解决

supereric

你都重复初始化了 setInterval 里面会一直重复初始化swiper实例都会出错的吧

小小白前来探路

supereric 发表于 2021-7-21 22:37
你都重复初始化了 setInterval 里面会一直重复初始化swiper实例都会出错的吧

...

老哥，那该怎么弄，初始化拿出来后，就会导致第一页的图片每次一闪而过。有没有好的办法解决，或者其他更好的方法去多次动态获取后台数据