JavaScript ||Angular2 / 6: вызов setInterval несколько раз, но последний timerId не останавливается, даже если вызывается clearInterval

Question

Требование:

1. Пользователь сканирует несколько номеров заданий, для каждого номера задания мне нужно вызвать один API, получить общую информацию о задании и показать ее втаблица под отсканированным текстовым полем.

2. Пользователь не хочет ждать, пока вызов API завершится.Он будет сканировать непрерывно, независимо от того, были ли детали или нет.

Что я сделал:

1. Я выбрал одну переменную jobNumberList, котораяхранит все номера заданий, отсканированные пользователем
2. Я постоянно звоню в API с этими номерами заданий.
3. Когда API дает ответ, я добавляю в таблицу
4. Я создал один метод с именем m1 ()
5. m1 () =>
   • . Этот метод будет сравнивать jobNumberList с данными таблицы строк.
   • , если какой-либо элемент не найден вданные строк таблицы сравниваются с данными jobNumberList, затем они все еще загружают задания (значит, API, а не ответ на эти задания)
6. Я использую setInterval () для вызова m1 ()(интервал времени = 1000)
7. При совпадении данных jobNumberList и строк таблицы, я отменяю интервал

Проблема: Даже если яостановка опроса, интервал все еще выполняется.В чем будет проблема?

*

Проблема периодическая (не постоянная).Когда я быстро сканирую номера работ, то это происходит.Нормальная скорость не приходит.

*

Мой код выглядит следующим образом

 // START INTERVAL  
 startPolling() {
    var self = this;
    this.isPollingNow = true;
    this.poller = setInterval(() => {
      let jobsWhichAreScannedButNotLoadedInsideTableStill = self.m1();
      if (self.isPollingNow && jobsWhichAreScannedButNotLoadedInsideTableStill.length === 0) {
        self.stopPolling();
        self.isPollingNow = false;
      }
    }, 1000);
  }

  //STOP INTERVAL
  stopPolling() {
    var self = this;
    setTimeout(function () {
      window.clearInterval(self.poller); // OR  //clearInterval(self.poller) //
    }, 0);
  }

ТРЕБОВАНИЕ

ФОТО ОТЛАДКИ

Answer 1

Следующий код создаст и автоматически отменяет интервал, когда нет больше заданий для сканирования, этот принцип поможет вам, пожалуйста, спросите, если у вас есть какие-либо сомнения.

Используйте Clear Jobsкнопка для удаления jobs в массив, в котором хранятся все существующие задания

var globalsJobs = [1,2,3,4];

function scannableJobs () {
	return globalsJobs;
}

function generateAutoCancellableInterval(scannableJobs, intervalTime) {
	var timer;
	var id = Date.now();
  
  timer = setInterval(() => {
  	console.log("interval with id [" + id + "] is executing");
    var thereUnresponseJobs = scannableJobs();
    if (thereUnresponseJobs.length === 0) {
    	clearInterval(timer);
    }
  }, intervalTime)
}

const btn = document.getElementById('removejobs');
const infobox = document.getElementById('infobox');
infobox.innerHTML = globalsJobs.length + ' jobs remainings'

btn.addEventListener('click', function() {
	globalsJobs.pop();
  infobox.innerHTML = globalsJobs.length + ' jobs remainings'
}, false);

setTimeout(() => generateAutoCancellableInterval(scannableJobs, 1000), 0);
setTimeout(() => generateAutoCancellableInterval(scannableJobs, 1000), 10);

<button id="removejobs">
  clear jobs
</button>

<div id="infobox">
  
</div>
</div>