前端_jQ用setInterval()实现类似跑马灯效果，去除了marquee留白问题，可调节滚动速度，方向等（还需优化，优化完再发）

类似于跑马灯，又类似于swiper的翻页效果。
需求是标签整体为单位进行上下滚动，以展示内容。
 

功能不难，我却卡了好几天。

我选择了有点小问题的解决方案，setInterval()，先上代码。

 

var scroll_distance;

var my_scroll_up;

var rebeck_scroll;

var margin_top_px;

// 🡓🡓🡓🡓🡓🡓🡓🡓🡓🡓🡓🡓🡓🡓🡓🡓🡓重点在这里🡓🡓🡓🡓🡓🡓🡓🡓🡓🡓🡓🡓🡓🡓🡓🡓🡓🡓🡓🡓🡓🡓

// 由于代码执行的时间与setInterval执行的时间不一样，两个setInterval先后被执，就会排队

// 所以我设置了与滚动动画时长最长的的保持相同时间

// 但是由于页面加载时有需要等待这么久，所以直接先执行一变整体函数，再将函数放到40s的setInterval里面进行循环

// 减少了阻塞对浏览器产生的压力

whole_scroll_up(16)

setInterval(function(){

    whole_scroll_up(16)

},40000)

// ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

function whole_scroll_up(count){//count,数据量

    if (count>8) {//发生滚动的条件

        var single_height = $(".left-real-time-data-wrap-bottom-unit").height();//单个高度

        scroll_distance = -count*single_height;

        var whole_scroll_once = setInterval(function(){//整体滚动与回滚

            my_scroll_up =  setInterval(scroll_up_once(),100);//向上滚动

            rebeck_scroll  = setInterval(scroll_back_once(),100);//向下滚动

            clearInterval(whole_scroll_once)//以上动作完成后，清除整体滚动=》上滚+回滚

            return false//跳出函数

        },100)//利用setInterval来进行循环上滚和回滚动作

    }

}

function scroll_up_once(){//上滚函数 只执行一次

    $(".left-real-time-data-wrap-bottom").animate({//向上滚动

        marginTop: scroll_distance

    },40000);

    console.log(12);

    clearInterval(my_scroll_up);

    return false;//跳出函数

}

function scroll_back_once(){//回滚函数 只执行一次

    $(".left-real-time-data-wrap-bottom").animate({//归零动画

        marginTop: 0

    },1000);//样式归零动画过渡时间

    setInterval(my_scroll_up);

    console.log(555);

    clearInterval(rebeck_scroll)

    return false;//跳出函数

}

但问题是，不能从根源上解决脚本阻塞的问题，如果能够判断 setInterval()执行结束，或许会好一些。但是上网查询大量资料，对于判断setInterval()执行完毕，我依然没有找到一个能够说服我的方法。

我将此偷巧代码与大家分享，能够给你一些启发肯定最好。但更希望有大佬能够帮助我优化此段代码。非常期望与大家探讨。