更改setTimeout循環的延遲

目前我有一個字母和數字的字符串，它們被拆分成一個數組，然後逐個顯示，由用戶定義的一段時間分隔開來。儘管我在初始化myFunction（）之前遇到了一個問題，但我可以設置每分鐘顯示的字母/數字的數量，但是一旦函數運行，我無法更改速度。我將如何修改我的代碼以允許我在功能已經運行時改變速度。更改setTimeout循環的延遲

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>

來源

2017-07-14 J. Cannor

@Arrow嗨，這是否讓我在功能改變運行速度？ –

使用遞歸方法，其中每個回調設置下一個回調的超時值，而不是在開始時一次調度所有的回調。 – Bergi

您可以調用前一個完成後遞歸一個新的超時。這樣，每次在新的超時開始之前計算延遲。

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>

來源

2017-07-14 18:39:37

更改setTimeout循環的延遲

回答

相關問題