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

Question

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

这是代码和现场演示

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