Javascript 使用“单击时中断”停止循环

我有一个从1到20的简单循环。我想做的是通过点击按钮来停止循环。我所做的是，我设置了一个条件，在单击按钮时，变量

stop

的值将更改为1，这将触发

中断。但该值没有改变


var-stop=0；
对于（设i=1；i20
setTimeout
函数，您甚至在按下停止键之前就调用了。

解决此问题的多种方法之一是检查正在执行的函数
setTimeout
中的
stop
变量


var-stop=0；
对于（让i=1；i您可以在不使用jQuery的情况下尝试下一个代码。
我不建议使用--
$（'ul'）。追加（'
'+I+'
'）；
-
这是坏习惯。
真正的方法是在循环之前创建节点。
在此任务中，可以使用setIntrval而不是setTimout和loop


let itemList=（i）=>{
让item=document.createElement（'li'）；
项目价值=i；
item.textContent=i；
退货项目；
}
let list=document.getElementById（'list'）；
让stopButton=document.getElementById（'stop'）；
设i=0，
间隔
让我们重置=（）=>{
清除间隔（间隔）
}
stopButton.addEventListener（'单击'，（）=>{
重置（）
});
间隔=设置间隔（（）=>{
列表.附加（项目列表（i））
i++；
如果（i>20）重置（）
}，300）
停止


问题在于，在您有机会按下按钮之前，整个for循环已经执行。setTimeout实际上并不休眠或阻塞，而是放入一个新事件，并在for循环中继续

浏览器及其所有用于超时的时钟等只能在代码暂时运行完毕时运行。没有任何东西可以与sleep（）函数等效

也许使用异步函数（ES2015 IIRC，所有当前的非IE浏览器都应该支持），并等待由
util.promisify（setTimeout）（2000）
创建的承诺会更直观

没有阻塞功能。代码内部没有休眠。所有代码基本上都在CPU上运行，并在同步部分完成后设置异步发生的I/O和计时器事件

由于这个原因，JavaScript是不直观的。但是，一旦你看到可以通过这种方式获得一种性能，你可能会感觉到异步性的价值。我的意思是…当JS代码本身正在执行时，浏览器无法检查DOM。你不能滚动，不能单击，鼠标光标本身不会改变它的种类。只有一次代码块已完成，浏览器将处理所有挂起的事件。
不能通过单击事件停止for循环，因为JavaScript是单线程的。循环开始

for(let i = 1; i <= 20; i++){
...

for（设i=1；i我将进行递归。然后有两个中断条件stop和count==max


var-stop=false；
变量打印=函数（计数，最大值）{
setTimeout（函数（）{
如果（停止）{
返回；
}否则如果（计数==最大值）{
返回；
}否则{
$（'ul'）。追加（'
'+count+'
'）；
返回打印（++计数，最大值）；
}
}, 500);
}
$（“按钮”）。单击（函数（）{
停止=真；
});
打印（0，20）；




停止
，因为您的setTimeout都已触发。在您的
setTimeout
之前添加一个
console.log（i）
，如果我将if语句更改为
if（i==3）{break；}，您将看到我的意思
它可以工作。是的，因为你在3上中断了循环这就是我试图做的打破循环变量仍然没有改变。你是指
stop
变量吗？我添加了
console.log（stop）
就在
if
检查之前。您可以看到它变为1。当然，函数仍在执行，因为我们在开始时就设置了它们的超时。是的，先生，您是对的。我只是想知道为什么stop的值没有变。恐怕我不明白。如果按stop按钮，它会变。如果没有变你仍然会看到新的号码出现。无论如何，不要叫我先生，我是靠工作谋生的：）您没有注意到添加项目的延迟会随着项目数的增加而增加。它应该是
500
而不是
count*500
@MaorRefaeli不是真的在您的答案中，每个数字等待500毫秒乘以它之前的数字。数字2将在数字1后500毫秒出现，11将在10后5000毫秒出现。在每个问题中这个数字出现在它之前的500毫秒之后。它仍然有效，但它有不同的功能functionality@MaorRefaeli你完全是对的，我的错。谢谢你指出这一点！