网页卡死的原因之setInterval

因为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);
		});
	}
}

各位觉得有什么看法呢?

点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注