Javascript 试图在jQuery中延迟/暂停/减慢while循环

我环顾了很多地方，还没有找到答案。也许这只是一些无法做到的事情

我不熟悉jQuery和JavaScript。为了测试这些限制，我正在尝试创建一个脚本，在未选中复选框的情况下，将列表项连续附加到未排序的列表中。我知道，如果复选框被选中或未被选中，我的while语句在搜索时可能不正确，但目前我面临的主要问题是while循环开始运行的速度超过了浏览器的速度，锁定了页面，最终我不得不关闭浏览器。我读过许多关于setTimeout和setInterval的例子，但我不断看到的是，这些例子只适用于for/next样式的循环，其中循环根据变量进行预定数量的循环。我不要这个。我希望循环继续，直到我选中该框，然后它应该停止。因此，我正在寻找一种暂停循环或减慢循环速度的方法，以便1）我可以看到附加到页面的每个列表项，2）脚本将给我一个机会，通过在运行浏览器冻结/自杀之前选中复选框来结束循环

提前感谢，代码如下

$(function(){
    $(document).ready(function() {loopLi();});
        var i = $('#jlist li').size();
        console.log(i);

        function loopLi() {
            while($('#Chckbox').not(":checked") ) {
                setInterval(function(){
                    i++;
                    $('<li>' + i + '</li>').appendTo('#jlist');
                }, 5000);
            }
        }
});

$（函数（）{
$（document）.ready（函数（）{loopLi（）；}）；
变量i=$（'#jlist li'）.size（）；
控制台日志（i）；
函数loopLi（）{
while（$（“#Chckbox”）.not（“：checked”））{
setInterval（函数（）{
i++；
$（“
”+i+”
）。附录（“#jlist”）；
}, 5000);
}
}
});

---

编辑：谢谢大家。让它工作起来。没有意识到while循环会同时运行代码多次。这些都是为了工作而学习的，而我们目前拥有的这本书并没有对这些东西进行深入的探讨。目前正在使用jQuery：忍者新手。要回答这类问题，我们还需要看其他的东西吗？或者这仅仅是与之相关的东西吗？

您现在正在创建无限多的时间间隔-只要执行

循环，它就会创建一个新的时间间隔，因此浏览器总是很忙，无法响应复选框单击。只要一次间隔就足够了

此外，您应该使用
。is（）
，因为
.not
返回一个jQuery对象，该对象总是真实的，即在
时传递
if
/


var i=0；
函数loopLi（）{
setInterval（function（）{//此代码每500毫秒执行一次：
如果（！$（'#Chckbox'）。是（“：选中”））{
i++；
$（“
”+i+”
）。附录（“#jlist”）；
}
}, 500);
}
元(1元);；
当用户选中复选框时，可以使用clearInterval停止执行追加过程。
试试这个：

$(function(){
       var intObj = null;
  $(document).ready(function() {loopLi();});
        var i = $('#jlist li').size();
        console.log(i);
        function loopLi() {
            intObj = setInterval(function(){
            i++;
            $('<li>' + i + '</li>').appendTo('#jlist');
          }, 5000);
        }
        $('#Chckbox').click(function(){
            if(this.checked){
             clearInterval(intObj );
            }
        });
});

$（函数（）{
var intObj=null；
$（document）.ready（函数（）{loopLi（）；}）；
变量i=$（'#jlist li'）.size（）；
控制台日志（i）；
函数loopLi（）{
intObj=setInterval（函数（）{
i++；
$（“
”+i+”
）。附录（“#jlist”）；
}, 5000);
}
$（'#Chckbox'）。单击（函数（）{
如果（选中此项）{
clearInterval（intObj）；
}
});
});
我猜您想做类似的事情：


$（函数（）{
i=$（'#jlist li'）.size（）；
控制台日志（i）；
函数loopLi（）{
如果（$（“#Chckbox”）.not（“：checked”））{
i++；
$（“
”+i+”
）。附录（“#jlist”）；
setTimeout（loopLi，1000）；
}
}
loopLi（）；
});

注意，这里有很多类似的解决方案。您应该选择一个在循环中显式使用
setTimeout
调用，或者使用
clearInterval
清除
setInterval
计时器的选项，这是一个有效的修订。基本上，
loopLi
只在选中复选框之前添加项目。我加快了速度，以便你能看得更清楚

为了让您理解代码冻结浏览器的原因：您在while循环中执行setInterval函数，因此进行了数百万次setInterval函数调用，因此您在页面中添加了数百万个计时器，从而冻结了浏览器。这个故事的寓意是，不要在（实际上）无限循环中执行异步调用。这非常有效。我现在很担心下面有人说的话。关于清理间隔的事情。如果我要做其他事情，这是必须要做的事情，还是这意味着什么？@JHStarner：我要做的是总是运行间隔，每次检查是否附加
li
。还可以在未选中复选框时清除间隔。然后，间隔将始终附加一个
li
，但如果未选中，间隔将不会运行。@JHStammer：让我再解释一遍：）有两种可能性：1）每5秒检查一次复选框是否选中，如果选中，则附加一个
li
。2） 选中该复选框时，创建一个间隔，每隔5秒添加一个
li
。当你再次取消选中时，停止该间隔。好的，让我确定我得到了它。你给出的代码说：“我们有一个等于0的i的var。现在我们启动这个函数loopLi。在接下来的半秒钟内运行这个（如果没有选中复选框，则增加i和append）。完成代码后，拉动下一个函数loopLi。”这意味着该脚本每半秒钟运行一次，直到页面被终止？如果是这样的话，我得到了预期的结果，但现在事情并没有有效地进行。如果它要拉$（loopLi）；只要页面处于打开状态，即使选中了，这不是会慢慢消耗内存吗？@JHStarner：理论上它可能会消耗一些内存，但JavaScript内置了一个“垃圾收集器”，可以自动清理
$(function(){
       var intObj = null;
  $(document).ready(function() {loopLi();});
        var i = $('#jlist li').size();
        console.log(i);
        function loopLi() {
            intObj = setInterval(function(){
            i++;
            $('<li>' + i + '</li>').appendTo('#jlist');
          }, 5000);
        }
        $('#Chckbox').click(function(){
            if(this.checked){
             clearInterval(intObj );
            }
        });
});

$(function(){
    i = $('#jlist li').size();
    console.log(i);

    function loopLi() {
        if ($('#Chckbox').not(":checked") ) {
            i++;
            $('<li>' + i + '</li>').appendTo('#jlist');
            setTimeout(loopLi,1000);
        }
    }
    loopLi();
});