javascript在一个function里控制loading的显示与隐藏

Question

代码如下，不知为何无法执行出loading显示后又隐藏的效果。

[code="javascript"]

javascript在一个function里控制loading的显示与隐藏 function longtimefunction(){ //开始显示loading document.getElementById('loading').style.display='block'; var t=setTimeout("alert('这是一个长耗时的程序!');",4000); //长耗时程序完成后，隐藏loading document.getElementById('loading').style.display='none'; }

Loading...

这里是网页标题

这里是网页内容

这里是网页内容

加载长耗时function

[/code]

Answer 1

//开始显示loading

1 document.getElementById('loading').style.display='block';

2 var t=setTimeout("alert('这是一个长耗时的程序!');",4000);

3 //长耗时程序完成后，隐藏loading

document.getElementById('loading').style.display='none';
这个是加载到1的时候 准备渲染页面的时候 但是页面还在往下走 走到2碰到定时器(4秒执行就行向下加载) 一个动作它又继续往下走 到了3 3这也是要渲染而3是要隐藏 所以在1还没有完全渲染出来就被夭折啦！
123 这代码实际就是
类似于下面的代码
document.getElementById('loading').style.display='block';
document.getElementById('loading').style.display='none';

所以解决的方法我个人有2种

document.getElementById('loading').style.display='block';

var t=setTimeout("alert('这是一个长耗时的程序!');",4000);

alert("此处加个动作");
//长耗时程序完成后，隐藏loading

document.getElementById('loading').style.display='none';

第二种就是把 隐藏放到定时器中
setTimeout(function(){

//长耗时程序完成后，隐藏loading

document.getElementById('loading').style.display='none';

}, 1000)

可能说的有点逻辑乱 你试试就清楚啦