Question

我将我的问题简化如下：我有一大堆元素，对于每一个元素，我需要创建一个div。这会导致浏览器冻结，甚至更糟糕的是要求停止脚本的弹出窗口。

var fruits = ["0"]; 
for ( var i = 1; i < 2000; i ++){
    fruits.push(i);
}

function qweqwe(fruits) {
    var ida = fruits.shift();
    if (ida) {
        console.log(ida);
        $('#0').clone(true).attr('id', ida).insertAfter($('.asd:last'));
        qweqwe(fruits);
    }
}
$( "#butt" ).click(function() {
qweqwe(fruits);
});

有什么办法可以避免吗？或任何解决方法？可能一次创建50个元素的任何方式？我创建了一个jsfiddle来更好地解释我的问题 http://jsfiddle.net/b7dewtsk/1/ 提前致谢问候

Answer 1

你可以把它想象成一种社交媒体;有很多内容要显示，但是如果要同时获取所有内容，那么事情就会向南发展。

获取并显示数据的子集，然后当用户向下滚动时，您可以执行AJAX以获取要添加的下一个数据子集。您甚至可以立即获取子集并在滚动开始时附加它，以便在需要时准备好数据。

如果用户只需要查看前5％的数据，那么查询整个数据库是没有意义的。

修改

如果你100％确定你想要数据库表的全部内容，那么我会选择@Yury Tarabanko的观点，因为使用字符串比执行更轻量级添加操作n次。

Answer 2

您实际上可以创建一个大的html字符串并立即将其附加到DOM。

function showFruits(){
    var html = [];
    fruits.forEach(function(fruit) {
        html.push('<div id="', fruit, '" class="asd">qwe</div>');
    });
    $(html.join('')).insertAfter('.asd');
}

$( "#butt" ).click(showFruits);

Demo

浏览器冻结是因为Jquery克隆了很多div

2 个答案: