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并导致浏览器崩溃。

Answer 2

我相信，因为您正在克隆此行中的月份元素集：

var $month = $('.d-month').clone();

然后在填充天数函数中添加30行到此行中的月份：

$row.appendTo($month).show();

然后在这一行中将月份附加到日记中：

$month.appendTo('#diary').show();

然后下一次执行此行时，还有另一个月被克隆到这一行：

var $month = $('.d-month').clone();

除了克隆你在这一行中再次追加的行：

var $row = $('.d-row').clone();

在循环中执行此操作会大大增加负载。

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

2 个答案: