javascript || Angular2/6: Calling setInterval multiple times but last timerId is not stopping even though clearInterval called

Question

Requirement:

1. User scans multiple job numbers, for each job number , I need to call one API and get the total job details and show it in a table below the scanned text box.

2. User don't want to wait until API call finishes. He will scan continuously irrespective of details came or not.

What I have done:

1. I have taken one variable jobNumberList which stores all the job numbers the user scanned
2. I am continuously calling the API, with those job numbers.
3. When API, gives response , then I am adding to the table
4. I created one method called m1()
5. m1() =>
   • this method will compare the jobNumberList with the Table Rows data.
   • if any item not found in the table rows data when compare to jobNumberList data, then those are still loading jobs ( means API , not given response to those jobs )
6. I am using setInterval() to call m1() (time inteval = 1000 )
7. When jobNumberList and the Table rows data matches then I am cancelling the interval

Issue: Even though I am stopping the polling, still the interval is executing. What will be the issue?

*

The issue is intermittent (not continuous). When I scan job numbers fast, then its coming. Normal speed not coming.

*

My Code is as follows

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

REQUIREMENT

DEBUGGING IMAGES

Answer 1

The following code will create and auto cancellable interval when there is not more jobs to scan, this principle will do the trick that you need, please ask if you have any doubt.

Use the Clear Jobs button to remove jobs into the array that keep all the existing 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>