作者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)