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 запустит бесконечно повторяющийся таймер.В этом случае вы контролируете, хотите ли вы, чтобы это повторялось или нет в вашем коде.

Для этого предназначен setTimeout - одиночное отложенное выполнение.

Измените setInterval на setTimeout

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

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

Answer 2

В настоящее время каждый вызов recursive инициализирует другой интервал.Так, например, после первого вызова будет работать один интервал: после второго вызова будет инициализирован другой интервал (два интервала) и т. Д.

Поместите setInterval за пределы * 1007.* вместо:

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);
}

Answer 3

На всех рекурсивных вызовах инициализируется новый setInterval.Уберите его из рекурсивной функции или используйте 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);
  }
}
 setInterval(function() {
    recursive()
  }, 5000);

Answer 4

Переместите setInterval за пределы recursive.Каждый раз, когда вы запускаете recursive, вы создаете новый setInterval

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(recursive, 5000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>