Javascript Loop 函数在启动良好后开始运行缓慢

Question

我有一个 Js 脚本，可以非常快速地在文档上绘制 800 个完美贴合的图 block 。我的目标是非常快速地一个一个地绘制它们以创建一些加载效果。我喜欢它的启动速度，但在 100 之后它开始变慢并变得无聊......是否有一些解决方案或者它是否对 js 有很多工作？

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);
};
});

Answer 1

如评论中所述，由于用户计算机的性能，这不是最佳方法。您应该使用 JQueryUI 创建您的 div 并用动画显示它们，例如: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');