关于使用FOR，关于函数中DIV层的覆盖

最新推荐文章于 2024-10-26 16:48:46 发布

最新推荐文章于 2024-10-26 16:48:46 发布 · 144 阅读

文章标签：

#J#

javascript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍两种提高网页用户体验的方法：一是利用setTimeout替代嵌套for循环减少浏览器阻塞；二是使用全屏透明div阻止用户交互，确保长时间操作期间界面响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.用setTimeout代替for,提高页面体验

for(var i=0;i<50;i++){
     for(var j=0;j<100;j++){
            //do some thing
      }
}

在JS中使用如上代码，界面会出现类似线程阻塞一样的状态，
使用setTimeout代替for,改善页面体验,改成如下代码，

var myLRLindex=1;
function setLRL(){
	for(var j=1;j<100;j++){
		//do some thing
	}
	myLRLindex++;
	if(myLRLindex<50){
		setTimeout(setLRL,0);
	}
}

就好多了。当然，使用setTimeout所改变的资源，不能影响其他的与该段代码会同时运行的程序。

2.有些页面操作，处理时，不希望用户还能够点击页面，这时，可以用一个覆盖全屏的透明的div层来达到目的

创建div层的部分代码，

var div_wait = top.document.createElement('div');
div_wait.id='waitDiv_win'；
div_wait.style.cssText='position:absolute;left:0px;top:0px;width:100%;height:100%;z-index:1100;background-color: #000000; filter: alpha(opacity=30);';
div_wait.style.display='none';
top.document.body.appendChild(div_wait);

使用中可能会出现一些问题，比如下面

function test1(){
	//1.层显示
	//2.一些耗时操作
	//3.层隐藏
}

可能会发现，这个覆盖全屏的div层，测试时还能显示，为什么这里就不出现了呢。

主要是放在一个函数中，那么在函数结束前，页面是不会刷新的。页面不刷新，则层显示还没有出来，层就被隐藏了。

如果你在其中加上alert();语句，就可以看到，实际运行过程中，层是显示过的。alert()语句会导致页面的刷新。

如果不使用alert(),该怎么办呢？

比较下面两个代码就可以了

1.需要alert()的

	var divTop=null;

	function divAboveAll(){
		divTop = document.createElement('div');
		divTop.style.cssText='position:absolute;left:0px;top:0px;width:100%;height:100%;z-index:1100;background-color: #000000; filter: alpha(opacity=30);';
		divTop.style.display='block';
		document.body.appendChild(divTop);
		window.status='123';
                                alert('div显示');
		for(var i=0;i<1000;i++){
			for(var j=0;j<1000;j++){
				try{
					var m=3+4;
					var n=4+5;
					var p=6+6;
				}catch(e) {}
			}
		}
		divTop.style.display='none';
	}

2.不需要alert的

var divTop=null;	
function divAboveAll(){
	divTop = document.createElement('div');
	divTop.style.cssText='position:absolute;left:0px;top:0px;width:100%;height:100%;z-index:1100;background-color: #000000; filter: alpha(opacity=30);';
	divTop.style.display='block';
	document.body.appendChild(divTop);
	window.status='123';
	setTimeout(testdddd,0);
}
function testdddd(){
	for(var i=0;i<1000;i++){
		for(var j=0;j<1000;j++){
			try{
				var m=3+4;
				var n=4+5;
				var p=6+6;
			}catch(e) {}
		}
	}
	divTop.style.display='none';
}