更改setTimeout循环的延迟

Question

Currently I have a string of letters and numbers that get split into an array and then display one by one separated by a set amount of time defined by the user. I've run into a problem though, before I initialize myFunction(), I am able to set the number of letters/numbers that are displayed per minute, but once the function is running I cannot change the speed. How would I modify my code to allow me to change the speed up or down while the function is already running.

 var string = "33 a 52 20 82 86 81 7 96 86 c 25 29 44 64 77 D 40 32 55 50 L 65 48 35 21 85 y 46 88 63 55 u 48 65 6 17 37 e 51 53 47 50 a 16 72 M 64 80 P 54 w 43 f 4 67 32 55 79 29 62 11 32 g 47 78 38 42 59 92 x 15 43 61 92 50 57 31 Z 84 69 80 32 9 m 98 22 83 19 12 21 37 28 63 42 73 88 84 75 60"; function myFunction() { var array = string.split(' '); for (var i = 0; i < array.length; i++) { var delay = 60000/(document.getElementById('numPerMinute').value); (function (str) { setTimeout(function () { document.getElementById("displayResults").innerHTML = str; }, delay * i); })(array[i]); } } 

 <button onclick="myFunction()">Run</button> <input type="number" id="numPerMinute"/> <div id="displayResults"></div> 

Answer 1

You can invoke a new timeout recursively after the previous one has finished. This way the delay is calculated each time just before a new timeout starts.

 var string = '33 a 52 20 82 86 81 7 96 86 c 25 29 44 64 77 D 40 32 55 50 L 65 48 35 21 85 y 46 88 63 55 u 48 65 6 17 37 e 51 53 47 50 a 16 72 M 64 80 P 54 w 43 f 4 67 32 55 79 29 62 11 32 g 47 78 38 42 59 92 x 15 43 61 92 50 57 31 Z 84 69 80 32 9 m 98 22 83 19 12 21 37 28 63 42 73 88 84 75 60'; var btn = document.getElementById('btn'); btn.addEventListener("click", function() { var results = document.getElementById('displayResults'); var array = string.split(' '); this.disabled = true; results.innerHTML = '...'; function startDelay() { var numPerMinute = parseInt(document.getElementById('numPerMinute').value); if (!numPerMinute) { // Invalid input btn.disabled = false; return; } var delay = 60000 / numPerMinute; setTimeout(function() { results.innerHTML = array.shift(); startDelay(); }, delay); } startDelay(); }); 

 <button id="btn">Run</button> <input id="numPerMinute" type="number" value="30"> <div id="displayResults"></div>