如何在javascript中的每次迭代中以随机间隔运行setTimeout（）？

Question

我试图迭代一个字符串数组，每个迭代步骤延迟几毫秒。像下面的东西 -

var l = ['a', 'b', 'c'];
var delay = 5000;
for(var i = 0;i < l.lenght;i++) {
    document.querySelectorAll("a[title='" + l[i] + "']")[0].parentNode.children[0].click();
    delay = 5000 + Math.floor(Math.random() * 5000) + 1;
   **<WAIT for 'delay' number of milliseconds**
}

我已经能够使用setTimeout（）方法将代码转换为下面的代码 -

var i = 0;
var interval = setInterval(function() {
    if (i < l.length) {
        document.querySelectorAll("a[title='" + l[i] + "']")[0].parentNode.children[0].click();
       i++;
   }
   else {
      clearInterval(interval);
   }
   //delay = 5000 + Math.floor(Math.random() * 5000) + 1); **NOT SURE where to change the delay variable**
}, delay);

但是一旦setTimeout开始，延迟变量基本上变成一个常数。如何在每次迭代中更改延迟变量？

Answer 1

您可以为此创建递归计时器功能：

请尝试以下方法：

function displayValue(){
  
  let arr = ['a', 'b', 'c'];
  let delay = 1000;  
  let i = 0;
  
  function timerFunction(i){
     if(i === arr.length)
      return;
      setTimeout(()=>{
        console.log(arr[i]);
        i++;
        timerFunction(i);
      }, delay);
      delay = delay + 1000 + Math.floor(Math.random() * 4000);
  } 
  
  timerFunction(i);
}

displayValue();

Answer 2

你能尝试用这样的函数替换延迟变量吗？

var i = 0;
var interval = setInterval(
function() {
  if (i < l.length) {
    document.querySelectorAll("a[title='" + l[i] + "']")[0].parentNode.children[0].click();
    i++;
  }
  else {
    clearInterval(interval);
  }
},
function() {
  return 5000 + Math.floor(Math.random() * 5000) + 1;
}
);

Answer 3

您在示例中使用的setInterval初始化每（大约）N ms启动一次回调，其中N是固定的。你必须稍后用clearInterval清除它。

另一方面，setTimeout意味着 - 在~N次之后调用我的回调。然后你可以在回调中调用另一个setTimeout，使用不同的N.

举个例子：

function callback() {
  /* 
    your logic here
  */
  delay = 5000 + Math.floor(Math.random() * 5000) + 1);
  setTimeout(callback, delay); // for your "clearInterval" case - just don't invoke this
}

setTimeout(callback, initialDelay);