javascript - 单击时更改 setTimeout 的持续时间

Question

我正在研究这个显示 1-20 数字的简单循环。它以500ms的持续时间一个接一个地显示。我想做的是，当循环为 10 时，我单击按钮，它会立即显示剩余的 10 个数字。

谢谢。

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

$('button').click(function(){
   duration = 0;
});

ul li{
  list-style-type: none;
  float:left;
  width: 20px;
  color: #FFF;
  text-align: center;
}
ul li:nth-child(even){
  background-color: #222;
}
ul li:nth-child(odd){
  background-color: red;
}

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

Answer 1

您可以将循环替换为函数，其余工作正常:

var duration = 500;

function range(i, n) {
  setTimeout(function() {
    $('ul').append('<li>' + (i) + '</li>')
    if (i < n) {
      range(i + 1, n);
    }
  }, duration);
}
range(1, 20);

$('button').click(function() {
  duration = 0;
});

ul li {
  list-style-type: none;
  float: left;
  width: 20px;
  color: #FFF;
  text-align: center;
}

ul li:nth-child(even) {
  background-color: #222;
}

ul li:nth-child(odd) {
  background-color: red;
}

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