在点击时更改setTimeout的持续时间

Question

I'm working on this simple loop that display 1-20 numbers. It was displayed one by one with a duration of 500ms apart. what I'm trying to do is, when the loop is on 10 then I click the button it will show instantly the remaining 10 numbers.

Thanks.

 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

You could take a slightly different approach to the button click event, by emptying and rebuilding your <ul> list in the event that the button is clicked.

Something you also need to keep in mind is that your timeouts need to be cancelled when the button is clicked. To achieve this, you might consider storing each timeout's id, so that each timeout can be cleared when the button is clicked.

The following code is one approach to this, that minimises the amount of adjustment to your current code :

  var duration = 500; // Declare timeout array to store timeout ids var timeouts = []; for(let i=0; i < 20; i++ ){ // Store each timeout id, so that you can cancel them if // button clicked timeouts[i] = setTimeout(function(){ $('ul').append('<li>'+ (i+1) +'</li>') }, i * duration); } $('button').click(function(){ // If button clicked, empty ul and repopulate it $('ul').empty() for(var i = 0; i < timeouts.length; i++) { // Clear timeout at i clearTimeout(timeouts[i]) // Add li element for i $('ul').append('<li>'+ (i+1) +'</li>') } 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 2

One option would be to have an array of functions that are shift ed and called on each interval. On click, clear the interval and forEach over the rest of the functions still in the array, and call them:

 var duration = 500; const fns = []; for(let i=0; i < 20; i++ ){ const fn = () => $('ul').append('<li>'+ (i+1) +'</li>'); fns.push(fn); } const interval = setInterval(() => { const fn = fns.shift(); if (fn) fn(); else clearTimeout(interval); }, duration); $('button').click(function(){ fns.forEach(fn => fn()); clearTimeout(interval) }); 

 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 3

You can replace loop with function instead, rest works fine:

 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>