更改setTimeout循环的延迟

时间:2017-07-14 17:27:07

标签: javascript

目前我有一串字母和数字被分割成一个数组,然后逐个显示,由用户定义的设定时间隔开。我遇到了一个问题,在初始化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>

1 个答案:

答案 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>