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

Question

要求:

1. 用户扫描多个工号，对于每个工号，我需要 调用一个 API 并获取全部作业详细信息并将其显示在表格中 在扫描的文本框下方。

2. 用户不想等到 API 调用完成。无论有没有细节，他都会持续扫描。

我做了什么:

1. 我使用了一个变量 jobNumberList，它存储了用户扫描的所有作业编号
2. 我不断地调用 API，使用这些作业编号。
3. 当 API 给出响应时，我正在添加到表中
4. 我创建了一个名为 m1() 的方法
5. m1() =>
   • 此方法会将 jobNumberList 与表格行数据进行比较。
   • 如果在与 jobNumberList 数据进行比较时在表行数据中找不到任何项目，则这些项目仍在加载作业(意味着 API，未对这些作业给出响应)
6. 我正在使用 setInterval() 调用 m1()(时间间隔 = 1000)
7. 当 jobNumberList 和表行数据匹配时，我将取消间隔

问题: 即使我正在停止轮询，间隔仍在执行。会出现什么问题？

*

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

*

我的代码如下

 // 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>