试图在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++; $('
' + i + '
').appendTo('#jlist'); }, 5000); } } }); 

编辑：谢谢大家。 搞定了。 没有意识到while循环会同时多次运行代码。 这一切都是为了工作而学习的，而我们目前所拥有的这本书并没有深入探讨这些内容。 目前正在使用jQuery：新手到忍者。 还有什么我们应该看看来回答这些问题，或者这只是与它一起工作的东西？

Answer 1

您现在正在创建无限的间隔 – 只要执行while循环，它就会创建一个新的循环，因此浏览器总是很忙，无法响应复选框单击。 只需一个间隔即可。

另外，你应该使用! .is() ! .is()因为.not返回一个jQuery对象，它始终是真实的，即传递if / while 。

http://jsfiddle.net/rUAKx/

 var i = 0; function loopLi() { setInterval(function() { // this code is executed every 500 milliseconds: if(!$('#Chckbox').is(":checked")) { i++; $('
' + i + '
').appendTo('#jlist'); } }, 500); } $(loopLi); 

Answer 2

我猜你想做类似的事情：

http://jsfiddle.net/PsXEa/5/

 $(function(){ i = $('#jlist li').size(); console.log(i); function loopLi() { if ($('#Chckbox').not(":checked") ) { i++; $('
' + i + '
').appendTo('#jlist'); setTimeout(loopLi,1000); } } loopLi(); }); 

请注意，您在这里有很多类似的解决方案。 您应该选择一个在循环中显式使用setTimeout调用，或者使用clearInterval清除其setInterval定时器的调用。

Answer 3

当用户选中复选框时，您可以使用clearInterval停止执行追加过程。 试试这个：

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

Answer 4

这是一个有效的修订版。 基本上， loopLi将仅添加项目，直到选中该复选框。 我把它加速了所以你可以更好地看到它。

http://jsfiddle.net/TrowthePlow/WkstU/