如何防止我的函数在setinterval内运行duplicate / times / triice

时间:2017-04-19 00:28:05

标签: javascript jquery ajax function setinterval

我正在使用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">&nbsp;&nbsp;&nbsp;&nbsp; Remove &nbsp;&nbsp;&nbsp;&nbsp;</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 -->');
            };            
          }
        }
  });  
}

0 个答案:

没有答案