要求:
用户扫描多个工号,对于每个工号,我需要
调用一个 API 并获取全部作业详细信息并将其显示在表格中
在扫描的文本框下方。
用户不想等到 API 调用完成。无论细节是否出现,他都会不断地扫描。
我做了什么:
- 我采用了一个变量 jobNumberList 来存储用户扫描的所有作业编号
- 我不断地使用这些职位编号来调用 API。
- 当 API 给出响应时,我将添加到表中
- 我创建了一种名为 m1() 的方法
- m1() =>
- 此方法会将 jobNumberList 与表行数据进行比较。
- 如果与 jobNumberList 数据相比,在表行数据中找不到任何项目,则这些项目仍在加载作业(意味着 API,未对这些作业给出响应)
- 我正在使用 setInterval() 调用 m1() (计时器间隔 = 1000 )
- 当 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(使用前将#替换为@)