瀏覽器凍結，因爲jquery克隆多個div

我簡化了我的問題，如下所示：我有一個巨大的元素數組，併爲他們每個人，我需要創建一個div。這會導致瀏覽器凍結，甚至導致請求停止腳本的彈出窗口。瀏覽器凍結，因爲jquery克隆多個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/ 由於事先問候

來源

2014-11-21 Gotrekk

我可以問_why_你在做這個嗎？ – Jonast92 2014-11-21 10:52:41

我需要從數據庫中獲取大量元素，並讓用戶決定「事物」檢查或取消選中項目 – Gotrekk 2014-11-21 10:54:25

將html生成爲字符串並一次追加所有內容。 http://jsfiddle.net/tarabyte/b7dewtsk/2/ – 2014-11-21 11:00:10

實際上，您可以創建一個大的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。

來源

2014-11-21 11:12:45

你可以認爲它像一個社交媒體;有很多內容需要展示，但是如果所有內容都要在同一時間提取，那麼事情會向南。

獲取並顯示數據的子集，然後當用戶向下滾動時，您可以執行AJAX來獲取要添加的下一個數據子集。您甚至可以立即獲取子集並在滾動開始時追加它，因此您的數據在需要時準備就緒。

無論如何，查詢整個數據庫沒有意義，如果用戶只需要查看它的前5％。

編輯

如果你是100％肯定你想要的數據庫表的全部內容，那麼我用@Yury Tarabanko的點去，因爲有一個字符串工作的方法更多相較於執行輕量級一次添加操作n次。

來源

2014-11-21 10:57:03 Jonast92

這聽起來像一個非常好的解釋/解決方案...有關如何做到這一點的任何提示？：D – Gotrekk 2014-11-21 10:59:44

[This]（http://stackoverflow.com/questions/14035180/jquery-load-more-data-on-scroll）看起來像一個非常整潔的解決方案或有點接近它，我敢肯定有很多各種各樣的替代品:) – Jonast92 2014-11-21 11:04:30

向下選民關懷解釋？ – Jonast92 2014-11-21 11:05:01

瀏覽器凍結，因爲jquery克隆多個div

回答

相關問題