更改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循环的延迟

回答

相关问题