Javascript循環函數啓動後運行緩慢

我有一個Js腳本，可以很快地在文檔上繪製800個完美的貼磚。我的目標是一個接一個地繪製它們，以創建一些加載效果。我喜歡它的起始速度，但在100之後，它開始變慢並變得無聊......有沒有解決方法，還是對js有很大的幫助？Javascript循環函數啓動後運行緩慢

Here is the code and a live demo

var Gen_height=$(document).height()-21; 
var Gen_width=$(document).width()-41; 
var wid=Gen_width/40; 
var hei=Gen_height/20; 
var rot=40*20; 

contrail(); 

var counter=0; 

function contrail() { 
    if (counter < rot) { 
     $('body').append('<div id="box" style="width:' + wid + 'px; height:' + hei + 'px;"><div style="padding-top:15px;"><center>' + counter + '</center></div></div>'); 
     counter++ 
    } 
    setTimeout(contrail, 0); 
}; 
});

來源

2012-11-03 Alexander

對於初學者來說，你可以停止使用jQuery。另外'setTimeout（func，0）'不能按預期工作，因爲不同的瀏覽器/系統需要更多或更少的時間來處理它。 – PeeHaa

在我的機器上運行得非常快。這可能很大程度上取決於運行此代碼的計算機的規格。 –

哎呀！ :(好吧..這是一個很大的缺點 – Alexander

如描述的意見，這是不是最好的方法，由於用戶計算機perfomence。您應該創建DIV，並使用jQueryUI的例如像這樣的動畫顯示出來：http://jsfiddle.net/rT5rL/13/

var $container = $('#container'); 
$container.hide(); 
while(counter <= rot) 
{ 
    $container.append('<div id="box" style="width:' + wid + 'px; height:' + hei + 'px;"><div style="padding-top:15px;"><center>' + counter + '</center></div></div>'); 
    counter++; 
} 

$container.slideDown(1000);

更多的影響在這裏：http://jqueryui.com/effect/#easing

$container.animate({ height: "show" }, 2000, 'easeInOutBounce');

來源

2012-11-03 19:13:24 sdespont

您的解決方案對用戶非常友好，我喜歡它。我會保留它，直到我將其更改爲畫布。謝謝你的時間！ – Alexander

Javascript循環函數啓動後運行緩慢

回答

相關問題