Re: [問題] jQuery UI的dialog plug-in 如何在$(do …
※ 引述《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)
討論串 (同標題文章)
Ajax 近期熱門文章
PTT數位生活區 即時熱門文章
