Javascript 单击更改设置超时的持续时间

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

谢谢

var持续时间=500；
for（设i=0；i<20；i++）{
setTimeout（函数（）{
$（'ul'）。追加（'
'+（i+1）+'
'）
}，i*持续时间）；
}
$（“按钮”）。单击（函数（）{
持续时间=0；
});
ulli{
列表样式类型：无；
浮动：左；
宽度：20px；
颜色：#FFF；
文本对齐：居中；
}
第n个孩子（偶数）{
背景色：#222；
}
第n个孩子（单数）{
背景色：红色；
}




显示所有
您可以采取稍微不同的方法来处理按钮单击事件，方法是在按钮被单击时清空并重建
列表

您还需要记住的是，当单击按钮时，您的超时需要取消。为了实现这一点，您可以考虑存储每个超时的ID，以便在单击按钮时可以清除每个超时。< /P>
以下代码是实现此目的的一种方法，可最大限度地减少对当前代码的调整量：


var持续时间=500；
//声明超时数组以存储超时ID
var超时=[]；
for（设i=0；i<20；i++）{
//存储每个超时id，以便在必要时取消它们
//点击按钮
超时[i]=设置超时（函数（）{
$（'ul'）。追加（'
'+（i+1）+'
'）
}，i*持续时间）；
}
$（“按钮”）。单击（函数（）{
//如果点击按钮，清空ul并重新填充
$（'ul'）.empty（）
对于（变量i=0；i'+（i+1）+''）
}
持续时间=0；
});
ulli{
列表样式类型：无；
浮动：左；
宽度：20px；
颜色：#FFF；
文本对齐：居中；
}
第n个孩子（偶数）{
背景色：#222；
}
第n个孩子（单数）{
背景色：红色；
}




显示所有
一个选项是拥有一组函数，这些函数在每个时间间隔内被调用。单击后，清除间隔和
forEach
，覆盖仍在数组中的其余函数，并调用它们：


var持续时间=500；
常数fns=[]；
for（设i=0；i<20；i++）{
常量fn=（）=>$（'ul'）。追加（'
'+（i+1）+'
'）；
推挤（fn）；
}
常量间隔=设置间隔（（）=>{
常数fn=fns.shift（）；
if（fn）fn（）；
else清除超时（间隔）；
}，持续时间）；
$（“按钮”）。单击（函数（）{
forEach（fn=>fn（））；
清除超时（间隔）
});
ulli{
列表样式类型：无；
浮动：左；
宽度：20px；
颜色：#FFF；
文本对齐：居中；
}
第n个孩子（偶数）{
背景色：#222；
}
第n个孩子（单数）{
背景色：红色；
}




显示全部
您可以用函数替换循环，其余的工作正常：


var持续时间=500；
功能范围（i，n）{
setTimeout（函数（）{
$（'ul'）。追加（'
'+（i）+'
'）
if（i
ulli{
列表样式类型：无；
浮动：左；
宽度：20px；
颜色：#FFF；
文本对齐：居中；
}
第n个孩子（偶数）{
背景色：#222；
}
第n个孩子（单数）{
背景色：红色；
}




显示全部
Hi sir，谢谢您的帮助，有没有办法只更改变量值？很遗憾，没有，一旦通过
setTimeout
设置超时，超时持续时间就无法更改。对于一般情况，必须清除超时，然后使用新的持续时间重新调用。