JavaScript || Angular2/6:多次调用setInterval,但最后一个timerId没有停止,即使调用了clearInterval

2024-03-17

要求:

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

  2. 用户不想等到 API 调用完成。无论细节是否出现,他都会不断地扫描。

我做了什么:

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

Issue: 即使我停止轮询,间隔仍在执行。会出现什么问题呢?

*

该问题是间歇性的(不是连续的)。当我扫描职位编号时 快,然后它就来了。正常速度来不及。

*

我的代码如下

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

要求

调试图像


以下代码将在没有更多作业要扫描时创建并自动取消间隔,这个原理将满足您需要的技巧,如果您有任何疑问,请询问。

Use the 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JavaScript || Angular2/6:多次调用setInterval,但最后一个timerId没有停止,即使调用了clearInterval 的相关文章

随机推荐