Question

我有一个带有任何参数的数组，例如：let EveryTen = ['a,'b','c']，并且我需要每5分钟对数组中的每个parameter（3）执行一次函数。

我尝试使用此代码，但5分钟后立即运行所有内容

  EveryTen.forEach(element => {
    setDelay(element)
  });


const setDelay = (element) => {
   setTimeout(function(){
     UpdateDataPost(element); //Function A
     UpdateDataBasic(element); //Function B
   }, 60 * 5 * 1000);
}

你能帮我吗？

Answer 1

它写成这样：

setInterval(function(){
     UpdateDataPost(element); //Function A
     UpdateDataBasic(element); //Function B
   }, 1000*60*5);

如果您想每次更新一个不同的元素，我会在您的函数中包含某种计数器。这是一个示例：

var i = 0;
setInterval(function(){
     UpdateDataPost(EveryTen[i]); //Function A
     UpdateDataBasic(EveryTen[i]); //Function B
     i++;
   }, 1000*60*5);

如果您要在使用完每个项目后停止，那么这可能是最好的方法：

var i = 0;

var interval = setInterval(function(){
     if(i <EveryTen.length) {
       UpdateDataPost(EveryTen[i]); //Function A
       UpdateDataBasic(EveryTen[i]); //Function B
       i++;
     } else {
        clearInterval(interval);
     }
   }, 1000*60*5);

Answer 2

这对我来说似乎是一个递归问题：）

您为什么不在setDelay内致电setInterval？以您的示例为例：

 EveryTen.forEach(element => {
   setDelay(element)
 });


 const setDelay = (element) => {
    setTimeout(function(){
       UpdateDataPost(element); //Function A
       UpdateDataBasic(element); //Function B
       setDelay(element);   // Added this.
    }, 60 * 5 * 1000);
 }

或更简单地，使用setInterval：

const startInterval = (element) => {
   setInterval(function(){ 
       // Do something
   }, 60 * 5 * 1000);
}

Answer 3

这是setInterval的一个很好的用例，我们只需定义它运行的时间间隔（5分钟），它将它添加到事件循环中。知道了这一点，我们可以使用计数器来跟踪传递的间隔数，从而采取不同的方法，这样我们就可以处理每个存储桶。

然后，一旦间隔数达到GTE数组的长度，我们就知道所有数组都已处理，可以清除间隔以阻止其继续。

.conf

输出：

const everyTen = ['a', 'b', 'c'];

const updateDataPost = (data) => {
  console.log(`updateDataPost ${data}`);
};

const updateDataBasic = (data) => {
  console.log(`updateDataBasic ${data}`);
};

let intervalsPassed = 0;

const interval = setInterval(() => {
  const currentBucket = everyTen[intervalsPassed++];
  updateDataPost(currentBucket);
  updateDataBasic(currentBucket);
  if (intervalsPassed >= everyTen.length) {
    console.log('no more buckets, stopping interval')
    clearInterval(interval);
  }
}, 1000 * 60 * 5);

这是一个可玩的JS容器，我将其设置为5秒以使其更快地测试https://jsbin.com/fafewelufi/edit?js,console

Answer 4

具有一个功能，用于所有值

var arr = ["a", "b", "c"];

function output(val) {
  console.log(val);
}

function setTimeouts(arr, ms, f) {
  arr.forEach(function(val, i) {
    setTimeout(function() {
      f(val);
    }, ms * (i + 1));
  });
}

// Change 3000 -> 1000 * 60 * 5
setTimeouts(arr, 3000, output);

为每个值提供自定义功能

var arr = ["a", "b", "c"];

function f1(val) {
  console.log("This is f1 with val: " + val);
}

function f2(val) {
  console.log("This is f2 with val: " + val);
}

function f3(val) {
  console.log("This is f3 with val: " + val);
}

function setTimeouts(arr, ms, fns) {
  arr.forEach(function(val, i) {
    setTimeout(function() {
      fns[i](val);
    }, ms * (i + 1));
  });
}

// Change 3000 -> 1000 * 60 * 5
setTimeouts(arr, 3000, [f1, f2, f3]);

Answer 5

我将为您提供解决此问题的方法。

根据我的收集，您希望每5分钟只处理一个元素，直到最后一个元素被完全处理。这是我的建议：

slowlog

这也可以与const ProcessListInInterval = (interval, list, callback) => { // Sets a delay for the element at the `index` position const setDelay = (index) => { // Only sets the delay if index < 0 if (index < list.length) { setTimeout(() => { const element = list[index]; // Process element callback(element); // Sets delay for the next index, you could potentially add code // to reset the index here, if you don't want this to ever stop setDelay(time, index + 1); }, interval); } }; // Start from index 0 setDelay(0); }; ProcessListInInterval(300000 /* 5 * 60 * 1000 */, EveryTen, (element) => { // Do processing here });一起使用，但是由于三个原因，我喜欢这样做：

setInterval的代码是不可变的，它不会更改您的列表，并且您不能弄乱其局部变量
它是孤立的，没有变量转义函数作用域
它是通用且可重复使用的

我也是functional programming的狂热者，所以我更喜欢这种不变性+递归的方式。

Answer 6

异步/等待使这一过程变得简单而简单。

function wait(ms) {
  return new Promise((res) => setTimeout(res, ms));
}

async function main() {
  for (const element of EveryTen) {
    update(element);
    await wait(5 * 1000); // wait 5 seconds for example purposes
  }
}


// below not relevant specific implementation details


function update(element) {
  UpdateDataPost(element); //Function A
  UpdateDataBasic(element); //Function B
}

function UpdateDataPost(element) {
  element.textContent = `updated at ${new Date()}`
}

function UpdateDataBasic(element) {
  document.querySelector(".basic").textContent = `updated at ${new Date()}`
}

const EveryTen = Array.from(document.querySelectorAll(".post"));

main();

<h2>post 1</h2>
<p class="post">post not updated</p>
<h2>post 2</h2>
<p class="post">post not updated</p>
<h2>post 3</h2>
<p class="post">post not updated</p>
<h2>post 4</h2>
<p class="post">post not updated</p>
<h2>post 5</h2>
<p class="post">post not updated</p>
<h2>Basic</h2>
  <p class="basic">basic not updated</p>

如何在JavaScript中每5分钟调用一次函数

6 个答案: