JavaScript setInterval() 方法无法按我的预期工作

Question

我有一个错误字符串数组，这些错误是提交后表单中的错误。

我想在固定时间后将这些错误一一显示为通知，假设每 5 秒一次。

我的代码是:

var array = ["1", "2", "3", "4", "5", "6"];
recursive();

function recursive() {
  var error = array.pop();
  if (typeof error === 'undefined') {
    return;
  } else {
    console.log(error);
    //         showNoti(error);
  }
  setInterval(function() {
    recursive()
  }, 5000);
}

此代码的问题在于，它在前 2 次迭代中运行良好，在 5 秒后打印出 5，打印出 6。

但在第三次迭代时，它同时打印字符串 4 和 3。与第四次迭代类似。

如何修复它，使其每 5 秒打印一次数组中的每个元素？

Answer 1

目前，每次递归调用都在初始化另一个间隔。因此，例如，在第一次调用之后，将运行一个间隔:在第二次调用之后，将初始化另一个间隔(两个间隔)，等等。

将 setInterval 放在 recursive 之外:

var array = ["1", "2", "3", "4", "5", "6"];
recursive();

function recursive() {
  var error = array.pop();
  if (typeof error === 'undefined') {
    return;
  } else {
    console.log(error);
    //         showNoti(error);
  }
}
setInterval(function() {
  recursive()
}, 500);

或者使用setTimeout代替:

var array = ["1", "2", "3", "4", "5", "6"];
recursive();

function recursive() {
  var error = array.pop();
  if (typeof error === 'undefined') {
    return;
  } else {
    console.log(error);
    //         showNoti(error);
  }
  setTimeout(recursive, 500);
}