setTimeoutループの遅延の変更

Question

現在、文字と数字の文字列が配列に分割され、ユーザーが定義した一定の時間だけ区切って1つずつ表示します。私は問題に遭遇しましたが、私はmyFunction（）を初期化する前に、毎分表示される文字数/数値を設定することができますが、関数が実行されると速度を変更することはできません。関数がすでに実行されている間、速度を変更できるようにするには、コードをどのように変更しますか？

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

あなたは以前の1が終了した再帰的に後に新しいタイムアウトを呼び出すことができます。このようにして、遅延は、新しいタイムアウトが始まる直前に計算されます。

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>