因为setInterval每次循环并未释放资源,所以有必要做出一些改进
比如我这个横向滚动(跑马灯)为例
<div id="scrolldv" class="marquee">
<span id="contentspan" style="display: block;width: 100%;">我跑跑马灯怎么了</span>
</div>
这是控制跑马灯的js,土办法
function Marqpuee()
{
//滚动函数
var contentLength=0;
var gundong=document.getElementById("contentspan");
if(gundong)
{
//获取滚动的内容长度
contentLength=gundong.offsetWidth;
var scrolldv=document.getElementById("scrolldv");
//遮罩层长度
document.getElementById("scrolldv").style.width=contentLength+"px";
//内容层长度
document.getElementById("contentspan").style.width=contentLength+"px";
//左留白
document.getElementById("contentspan").style.paddingLeft=contentLength+"px";
//右留白
document.getElementById("contentspan").style.paddingRight=contentLength+"px";
//定时器
setInterval(function()
{
self.setTimeout(() => {}, 0); //防止网页卡顿
if(scrolldv.scrollLeft>=2*contentLength)
{
scrolldv.scrollLeft=0;
}else
{
scrolldv.scrollLeft++;
}
},1);
}
}
卡顿问题用
self.setTimeout(() => {}, 0);
来解决。但是这个在手机端运行是不太正常的
所以用requestAnimationFrame改一下:
function Marqpuee()
{
//滚动函数
var contentLength=0;
var gundong=document.getElementById("contentspan");
if(gundong)
{
//获取滚动的内容长度
contentLength=gundong.offsetWidth;
var scrolldv=document.getElementById("scrolldv");
//遮罩层长度
document.getElementById("scrolldv").style.width=contentLength+"px";
//内容层长度
document.getElementById("contentspan").style.width=contentLength+"px";
//左留白
document.getElementById("contentspan").style.paddingLeft=contentLength+"px";
//右留白
document.getElementById("contentspan").style.paddingRight=contentLength+"px";
//定时器
let timer = requestAnimationFrame(function fn() {
if(scrolldv.scrollLeft>=2*contentLength)
{
scrolldv.scrollLeft=0;
}else
{
scrolldv.scrollLeft++;
}
requestAnimationFrame(fn);
});
}
}
各位觉得有什么看法呢?