Javascript 尝试在 jQuery 中延迟/暂停/减慢 while 循环
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6682703/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Trying to delay/pause/slow a while loop in jQuery
提问by JHStarner
I have looked around a lot, and not found the answer yet. Maybe it is simply something that cannot be done.
我环顾了很多，还没有找到答案。也许这只是无法完成的事情。
I am new to jQuery and JavaScript. Just to test the limitations I am trying to create a script that will continuously append a list item to an un-ordered list while a check box is not checked. I know I may not have my while statement correct in searching if the checkbox is checked or not, but the main issue I am having at the moment is the while loop starts running faster than the browser can keep up, locks up the page, and eventually I have to kill the browser. I have read many examples on setTimeout and setInterval, but what I continuously see is those only work with a for/next style loop, where the loop goes for a predetermined amount of cycles dependent upon a variable. I do not want this. I want the loop to continue until I check the box and then it should stop. So I am looking for a way to pause the loop or slow it down so 1) I can see each list item appended to the page, and 2) the script will give me a chance to end it by checking the box before it runs the browser to freeze/suicide.
我是 jQuery 和 JavaScript 的新手。只是为了测试限制，我正在尝试创建一个脚本，该脚本将在未选中复选框的情况下连续将列表项附加到无序列表。我知道在搜索是否选中复选框时，我的 while 语句可能不正确，但我目前遇到的主要问题是 while 循环开始运行的速度比浏览器可以跟上的速度快，锁定页面，并且最终我必须杀死浏览器。我已经阅读了很多关于 setTimeout 和 setInterval 的例子，但我不断看到的是那些只适用于 for/next 样式循环，其中循环根据变量进行预定数量的循环。我不想要这个。我希望循环继续，直到我选中该框，然后它应该停止。
Thanks in advance, code is below.
提前致谢，代码如下。
$(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);
}
}
});
EDIT: Thank you all. Got it working. Did not realize that a while loop would run the code multiple times at the same time. This is all being learned for work, and the book we currently have does not go this in depth with stuff. Currently using jQuery: Novice to Ninja. Anything else we should look at to answer these kinds of questions, or is this just something that comes with working with it?
编辑：谢谢大家。得到它的工作。没有意识到 while 循环会同时多次运行代码。这一切都是为了工作而学习的，我们目前拥有的这本书并没有深入探讨这些内容。目前使用 jQuery：新手到忍者。我们还应该考虑什么来回答这些问题，或者这只是与它一起工作的东西？
回答by pimvdb
You're now creating an infinite amount of intervals - as long as the whileloop is executed it creates a new one and the browser is therefore always busy and cannot respond to a checkbox click. Just one interval is enough.
您现在正在创建无限数量的间隔 - 只要while执行循环，它就会创建一个新的间隔，因此浏览器总是很忙，无法响应复选框单击。一个间隔就足够了。
Also, you ought to use ! .is()because .notreturns a jQuery object, which is always truthy, i.e. passing the if/while.
此外，你应该使用! .is()因为.not返回一个 jQuery 对象，它总是真实的，即传递if/ while。
var i = 0;
function loopLi() {
setInterval(function() { // this code is executed every 500 milliseconds:
if(!$('#Chckbox').is(":checked")) {
i++;
$('<li>' + i + '</li>').appendTo('#jlist');
}
}, 500);
}
$(loopLi);
回答by ironchefpython
I'm guessing you want to do something similar to this:
我猜你想做类似的事情：
$(function(){
i = $('#jlist li').size();
console.log(i);
function loopLi() {
if ($('#Chckbox').not(":checked") ) {
i++;
$('<li>' + i + '</li>').appendTo('#jlist');
setTimeout(loopLi,1000);
}
}
loopLi();
});
Note that you've got a lot of similar solutions here. You should select one that either uses a setTimeoutcall explicitly in the loop, or that cleans up their setIntervaltimer with clearInterval.
请注意，您在这里有很多类似的解决方案。您应该选择一个setTimeout在循环中显式使用调用或setInterval使用clearInterval.
回答by josh.trow
Here's a working revision. Basically, loopLiwill add the item only until the checkbox is checked. I sped it up so you can see it better.
这是一个工作修订版。基本上，loopLi只会在选中复选框之前添加项目。我加快了速度，以便您可以更好地看到它。
回答by Chandu
You can use the clearInterval to stop executing the append process when the user checks the checkbox. Try this:
当用户选中复选框时，您可以使用 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 );
}
});
});
