目前我有一串字母和数字被分割成一个数组,然后逐个显示,由用户定义的设定时间隔开。我遇到了一个问题,在初始化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>
答案 0 :(得分:0)
您可以在上一个完成后递归调用新的超时。这样,每次在新的超时开始之前计算延迟。
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>