javascript || Angular2 / 6：多次调用setInterval但最后一次timerId没有停止，即使调用了clearInterval [英] javascript || Angular2/6: Calling setInterval multiple times but last timerId is not stopping even though clearInterval called

问题描述

要求：

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

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.

用户不要我想等到API调用完成。无论是否有细节，他都会不断扫描。

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

我做了什么：

1. 我已经采用了一个变量jobNumberList来存储用户扫描的所有工作号码


2. 我是用这些工号来连续调用API。


3. 当API，给出响应，然后我添加到表中


4. 我创建了一个名为的方法m1（）


5. m1（）=>
   
   
   
   
   • 此方法将jobNumberList与Table Rows数据进行比较。
   
   
   • 如果在与jobNumberList数据进行比较时表中没有找到任何项目的数据，那么那些仍在加载作业（意味着API，没有给出对这些作业的响应）
   
   

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 )

问题：
甚至是我正在停止轮询，但是间隔仍在执行。会出现什么问题？

*

问题间歇性（不连续）。当我快速扫描作业号码
时，它即将到来。正常速度不会到来。

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

要求

调试图片

推荐答案

以下当没有更多的工作要扫描时，代码会创建和自动取消间隔，这个原则会做你需要的技巧，请问你是否有任何怀疑。

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>

这篇关于javascript || Angular2 / 6：多次调用setInterval但最后一次timerId没有停止，即使调用了clearInterval的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！