javascript - 如何阻止长时间的 javascript 循环导致浏览器崩溃？

Question

我的页面中有一个按钮，它循环播放一系列 DIV 并对其进行编辑(主要是附加文本，没什么大不了的)，问题是，DIV 的数量由用户更改(用户可以自由添加或删除它们)，

我正在通过 jQuery $.each 函数循环 DIV:

var DomToEdit = $('.divs_to_edit');
$.each(DomToEdit, function() { $(this).append('text'); ... });

变量 DomToEdit 包含无限数量的 div，然后我通过 $.each 函数引用它们。

有时在执行 $.each 循环时，用户需要等待几秒钟，在更糟糕的情况下，浏览器会崩溃

有没有办法避免这种情况？也许在 50 个 DIV 之后让循环“休眠”？

谢谢

编辑:抱歉，我没有使用相同的 ID - 这是我解释中的一个缺陷。我使用同一个类。 :)

Answer 1

.each 处理程序中函数的第一个参数是当前元素的索引。您可以简单地在它之前添加一个检查，然后 return false 停止循环。

$.each(DomToEdit, function(i) { // or DomToEdit.each(function() {
    if (i === 50) return false;
    ..

DomToEdit 是一个 jQuery 对象，所以 $.each(DomToEdit, fn)和 DomToEdit.each(fn)是等价的。

一个更有效的方法是切断元素，使用.slice(0, 50) .

DomToEdit.slice(0, 50).each( function(i) {
    ..