我正在使用setInterval,以便我的队列始终更新或检查更新。这就是我所拥有的。在我的代码中,我有一个setInterval,在setInterval中我有一个名为check_getqueue
的函数,在check_getqueue
函数内部我有一个名为refresh_afterdel
的函数,我在控制台运行时看到它两次,三次或有时它表现良好,只运行一次。我该如何防止这个问题?
这是我的setInterval,我把它放在我的选择框中:
$('#myclinic_id').change(function(){
clearInterval(interval);
lastQueueID = 0;
$("#boxqueue").empty();
var selectedClinicID = $(this).val();
clinicID = selectedClinicID;
statusClinic(clinicID, userID);
show_patients(clinicID, userID);
if(selectedClinicID != "0" || selectedClinicID != undefined){
interval = setInterval(function(){
check_getqueue(clinicID, userID);
}, 4000);
}
});
如果我的用户从我的选择框中选择,它将满足check_getqueue
函数的参数,并启动setInterval函数以每隔几毫秒运行一次。现在我的check_getqueue的目的是它是一个每当有更新或更改时检查我的队列的函数。如果它有更改或更新,div将自动刷新,因为我将div复习放在check_getqueue函数中,该函数名为refresh_after_del
。我的check_getqueue函数总是在运行,如果没有更新,它会持续运行。以下是check_getqueue的完整代码:
function check_getqueue(clinicID, userID) {
var tmpCountQ = [];
$.ajax({
url: siteurl+"sec_myclinic/checkingUpdates/"+clinicID+"/"+userID,
type: "POST",
dataType: "JSON",
success: function(data) {
for(var i=0;i<data.length;i++) {
tmpCountQ.push(data[i]['queue_id']);
};
if(typeof lastCon[0] != "undefined")
{
for(j=0;j < tmpCountQ.length;j++)
{
if(tmpCountQ[j] != lastCon[j])
{
refresh_afterdel(clinicID, userID);
lastCon[j] = tmpCountQ[j];
}
}
}
else
{
lastCon = tmpCountQ;
}
// console.log("lastCon "+lastCon)
// console.log("tmpCountQ "+tmpCountQ);
}
});
}
在check_getqueue函数中,只要满足check_getqueue函数内的条件,每次队列发生更改时,refresh_afterdel(clinicID, userID);
都会清除div。
现在我遇到了这些问题,因为每次我的数据发生变化时,有时候我的控制台中的refresh_after_del会运行两次/三次,而且在我的refresh_after_del中,我有一个明确的div:$("#boxqueue").empty();
所以我没有问题,如果它运行两次/三次,但它没有。它显示我的数据多次,如果它运行两次,三次三倍我的数据(仅在视图中),但如果我手动刷新它,它给我正确的数据。
这是我的refresh_after_del的完整代码:
function refresh_afterdel(getClinicID, userID) {
$("#boxqueue").empty();
$.ajax({
url: siteurl+"sec_myclinic/get_patients_refresh/"+getClinicID+"/"+userID,
type: "GET",
dataType: "JSON",
success: function(data) {
if(data.length>0) {
for(i=0;i<data.length;i++) {
$('#boxqueue').append('<div class="col-sm-10">'+'<div class="panel-group">'+'<div class="panel panel-info">'+
'<div class="panel-heading">'+'<h4><a data-toggle="collapse" href="#patientinfo'+data[i]['patient_id']+'">'+data[i]['order_num']+' '+data[i]['patient_lname']+', '+data[i]['patient_fname']+' <span class="fa fa-arrow-circle-o-down pull-right"></span></a></h4>'+
'</div><!-- panel-heading -->'+'<div id="patientinfo'+data[i]['patient_id']+'" class="panel-collapse collapse">'+'<div class="panel-body">'+'<div class="row">'+
'<div class="col-sm-5">'+'<small>Patient ID: <label id="patientID">'+data[i]['patient_id']+'</label></small>'+''+'<button onclick="checkstatus('+data[i]['patient_id']+');" id="btn'+data[i]['patient_id']+'" class="btn btn-success btn-xs ">View History</button>'+'<button onclick="removequeue('+data[i]['queue_id']+');this.disabled=true;" id="btn'+data[i]['patient_id']+'" class="btn btn-danger btn-xs btnmarg"> Remove </button>'+'</div><!-- col-sm-4 -->'+'<div class="col-sm-6">'+
'<div class="img-patient">'+'<div class="patient-pic" style="background-image: url('+data[i]['patient_photo']+')"></div>'+'</div><!-- img-patient -->'+'</div><!-- col-sm-6 -->'+'</div><!-- row -->'+
'</div><!-- panel-body -->'+'</div><!-- panel-collapse -->'+'</div><!-- panel -->'+'</div><!-- panel-group -->'+'</div><!-- col-sm-10 -->');
};
}
}
});
}