javascript - JavaScript/jQuery 中的嵌套循环不起作用

Question

我在一个 for 循环中调用一个 for 循环，但它不起作用，这是代码:

function PopulateMonths() {
for (var m = 0; m < 12; m++) {
    var $month = $('.d-month').clone();
    $month.find('.d-header').text(m);
    $month = PopulateDays($month);
    $month.appendTo('#diary').show();
    $month = null;
}
}

function PopulateDays($month) {
for (var d = 0; d < 30; d++) {
    var $row = $('.d-row').clone();
    $row.find('.d-day').text(d);
    $row.appendTo($month).show();
    $row = null;
}
return $month;
}

如果我手动调用 PopulateDays 12 次它工作正常，一旦我尝试使用 PopulateMonths() 循环 12 次页面崩溃，CPU 使用率飙升，所以我假设有很多工作正在进行。

我错过了什么？

Answer 1

我以前不得不解决一个非常相似的问题。这是因为当您克隆元素时，您也在克隆它们的类等。然后将克隆的项目插入到文档中。

下次您尝试查找具有该类的元素时，它将找到两个实例 - 原始实例和您在上一步中克隆的实例。两者都将被再次克隆，现在页面上有 4 个元素。因此，您基本上是在每次迭代中将元素数量加倍，几天内执行 12 次，几个月内执行 30 次。

2^12 = 4096
2^30 = 1,073,741,824

这些只是粗略估计它可以增长到多大。我没有做任何进一步的分析来找到确切的数字，但基本上指数增长正在消耗 CPU 并导致浏览器崩溃。