作者CindyLinz (Cindy Wang)
看板Ajax
标题Re: [问题] jQuery UI的dialog plug-in 如何在$(do …
时间Sun Jun 12 15:10:31 2011
※ 引述《mhsu2k9 (mhsu2k9)》之铭言：
: 我现在用setTimout可以解决
: 只是若dialogID里有gif图档时，在跑processTable()，gif的动画效果还是会停住
: $(document).ready(function(){
: $("#dialogID").dialog("open");
: setTimout(processTable(),500);
: });
: <div id="dialog-loading" style='display:none' >
: <p>资料处理中<img src='./images/loading.gif' /></p>
: </div>
: ※ 引述《mhsu2k9 (mhsu2k9)》之铭言：
: : 我在一个table.php里
: : 跑完<?php echo(tableHTML); ?>後
: : 在window.onload时，会跑一个javascript函式：processTable()来处理这张tableHTML
: : 只是资料量一大，就会耗到十秒钟，看起会像当机一样
: : 我在$(document).ready塞了jQuery UI里的dialog元件
: : 去呼叫$("#dialogID").dialog('open')
: : 结果是要等到processTable()跑完後，才会显示出来
: : 看起来还是像当机一样
: : 我如果在$(document).ready塞alert('processing')
: : alert是会在processTable()之前执行的
: : 我对jQuery并不是很熟
: : 不知道各位先进能否给个解决方案，让processTable()处理时不要像当机一样
: : 谢谢
你看看能不能把 processTable 的动作分成小段,
然後每处理完一段, 就用 setTimeout 来跳到下一段,
这样, 虽然处理的时间总长度是加长的,
但是在每一次 setTimeout 的时候都让浏览器有机会做其他的事
(像是播动画, 处理 onclick 等等)
就不会像是当掉..
我下面贴两个例子作比较, 前面这一个是一次处理完的, 後面这个是分段处理的,
你可以用浏览器开起来看看效果.
不过我分段作得比较极端, 你实际运用不一定要切这麽碎.
一次处理的例子:
<!Doctype html>
<html><head>
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js></script>
<script>setTimeout(
function()
{
var i, j;
var html = '';
for(
i=0
; i<10000
; ++i)
{
html += '<tr>';
for(
j=0
; j<10
; ++j)
html += '<td style=width:100px>' + i + ' * ' + j + ' = ' + i*j;
}
html = '<table style=table-layout:fixed>' + html + '</table>';
$(
'body')
.append(
html)
;
}, 500)
</script>
</head><body>Big Table
<img src=http://freegif.123gifs.eu/smileys/smiley-0273.gif><hr>
</body></html>
分段处理的例子:
<!Doctype html>
<html><head>
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js></script>
<script>$(
function()
{
$(
'body')
.append(
'<table style=table-layout:fixed><tbody></tbody></table>')
;
function render(
i)
{
if(
i>=10000
)
return;
var html = '<tr>';
var j;
for(
j=0
; j<10
; ++j)
html += '<td style=width:100px>' + i + ' * ' + j + ' = ' + i*j;
$(
'tbody')
.append(
html)
;
setTimeout(
function()
{ render(
i+1)
}, 0)
;
}
setTimeout(
function()
{ render(0)
}, 500)
;
})
</script>
</head><body>Big Table
<img src=http://freegif.123gifs.eu/smileys/smiley-0273.gif><hr>
</body></html>
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 210.242.246.249
※ 编辑: CindyLinz 来自: 210.242.246.249 (09/10 13:13)