情况!
这里是设置间隔的ID并进行检索时手头问题的样本重现。根据按钮的点击,会调用3个单独的事件。
事件之一是使用axios的POST请求。第二个过程基本上是一个等待POST请求完成的异步函数。
每个时间间隔都分配给该类的变量,并且在调用一个进程时,将清除另一个进程,以避免对django视图进行不必要的轮询。
单击每个过程按钮都可以很好地工作。
问题?
由于每个事件有3个单独的按钮,因此有可能再次单击其中一个按钮,这会触发另一个事件的发生并结束另一个事件 BUT ,连续单击同一按钮似乎没有结束该过程。
事件循环
单击按钮2。 (进程1尚未清除。进程2同时启动。)
单击按钮1。 (进程1和2同时运行。)<指发生的最后两个事件。
现在,由于某种原因,我们看到另一个事件循环似乎并没有在连续点击后结束。似乎ID已被覆盖,清除间隔一旦被覆盖,便无法再找到间隔。
示例代码
class Handler {
constructor () {
this.interval1 = 0;
this.interval2 = 0;
this.interval3 = 0;
}
getToken(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
process_one () {
clearInterval(this.interval2);
this.interval1 = setInterval(function() {
console.log(" Polling 1. ")
},300);
}
async process_two () {
clearInterval(this.interval1);
var scope_obj = this;
this.interval2 = setInterval(async function() {
console.log(" Polling 2. ");
var data = await scope_obj.process_three();
}, 500);
}
async process_three () {
return axios( {
url: "",
data:{"data":"LOL"},
headers : {
'X-CSRFToken': this.getToken('csrftoken'),
'Content-Type': 'application/x-www-form-urlencoded'
}
} )
}
}
let event = new Handler();
$("#p1").click(function() {
console.log("P1 started.")
event.process_one ();
})
$("#p2").click(async function() {
console.log("P2 started.")
event.process_two ();
})
$("#p3").click(function() {
console.log("P3 started.")
event.process_three ();
})
HTML代码。
<div class="row">
<div class="col-lg-12">
<button type="button" class="btn btn-warning" id="p1">P1</button>
<button type="button" class="btn btn-warning" id="p2">P2</button>
<button type="button" class="btn btn-warning" id="p3">P3</button>
</div>
</div>
答案 0 :(得分:0)
Ouroborus的回答是正确的。在开始流程之前,我有一条线结束了其他流程,但没有结束正确的流程。打印ID有助于我了解ID已被覆盖。
class Handler {
constructor () {
this.interval1 = 0;
this.interval2 = 0;
this.interval3 = 0;
}
getToken(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
process_one () {
clearInterval(this.interval2); // Clear the other interval.
clearInterval(this.interval1); // Clear the current interval.
this.interval1 = setInterval(function() {
console.log(" Polling 1. ")
},300);
}
async process_two () {
clearInterval(this.interval1); // Clear the other interval.
clearInterval(this.interval2); // Clear the current interval.
var scope_obj = this;
this.interval2 = setInterval(async function() {
console.log(" Polling 2. ");
var data = await scope_obj.process_three();
}, 500);
}
async process_three () {
return axios( {
url: "",
data:{"data":"LOL"},
headers : {
'X-CSRFToken': this.getToken('csrftoken'),
'Content-Type': 'application/x-www-form-urlencoded'
}
} )
}
}
代码的其他部分保持不变。