时间戳

首页 > 解决方案 > 使用 break on click 停止循环

javascript - 使用 break on click 停止循环

问题描述

我有这个从 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>

标签： javascriptjqueryfor-loopbreak

解决方案

这 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（查看Сергей Петрашко's answer以了解如何）。在此处
阅读它们之间的差异）：

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>

推荐阅读