使用 break on click 停止循环

Question

我有一个从 1 到 20 的简单循环。我想要做的是使用按钮单击停止循环。我所做的是，我设置了一个条件，即在单击按钮时变量的值stop将更改为 1，这将触发break. 但值没有改变。

var stop = 0;
for(let i = 1; i <= 20; i++){
  
  if(stop === 1){
    break;
  }
  
  setTimeout(function(){
    $('ul').append('<li>'+ i +'</li>');
  },i * 500);
}

$('button').click(function(){
    stop = 1;
});

ul li{
  list-style-type: none;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul></ul>

<br>
<button>stop</button>

Answer 1

这 20 个setTimeout函数在你按下停止键之前就被调用了。
解决此问题的众多方法之一是检查正在执行stop的函数内部的变量setTimeout。

var stop = 0;
for (let i = 1; i <= 20; i++){
  setTimeout(function(){
    console.log(stop);
    if (stop !== 1) {
      $('ul').append('<li>'+ i +'</li>');
    }
  },i * 500);
}

$('button').click(function(){
    stop = 1;
});

ul li{
  list-style-type: none;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul></ul>

<br>
<button>stop</button>

编辑：

你问如何停止for循环。它的写法你不能。
这就是我如何实现它以“停止”循环setTimeout。
您也可以使用setInterval（检查?????? ???????? 的答案以查看方法）。
在此处阅读它们之间的差异）：

var stop = false;

function addNumberAndCallNext(number, max) {
    if (!stop && number <= max) {
        $('ul').append('<li>'+ number +'</li>');
        setTimeout(addNumberAndCallNext.bind(null, ++number, max), 500);
    }
}

addNumberAndCallNext(1, 20);

$('button').click(function(){
    stop = true;
});

ul li {
  list-style-type: none;
  float: left;
  padding-right: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul></ul>

<br>
<button>stop</button>