prevent setInterval function running twice

Question

I have a setInterval function which runs every mini seconds. Now, i was exploring my console in browser and i saw that, my function inside the setInterval function was running twice sometimes. How can i prevent running it twice ?

Here is my 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);  
    }
});$('#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);  
    }
});

Now, inside the check_getqueue function i have a function also that i want to prevent it from running twice, here is my problem occurs. Here is my code inside the check_getqueue function, where the function named refresh_afterdel(clinicID, userID); inside the check_getqueue function i wan't to prevent running twice.

Here is the full code of my 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);
    }
  });
}

Answer 1

It depends on how you want to schedule it. Your check_getqueue function isn't literally overlapping with itself, it's just that the function starts an asynchronous process and then returns; the process doesn't complete until later, and sometimes (apparently) isn't done yet before the next call to check_getqueue starts the next async process.

Your basic two choices are:

1. Use a guard variable and ignore any calls to check_getqueue while the variable is set:

   var check_getqueue_ignore = false;
   function check_getqueue() {
       if (check_getqueue_ignore) {
           return;
       }
       check_getqueue_ignore = true;
       $.ajax({
           // ...
           complete: function() {
               check_getqueue_ignore = false;
           }
       });
   }
   

2. Don't use setInterval at all; instead, have check_getqueue schedule its next call only after the previous async result has come back:

   timer = setTimeout(check_getqueue, 4000);
   // ...
   
   function check_getqueue() {
       $.ajax({
           // ...
           complete: function() {
               timer = setTimeout(check_getqueue, 4000);
           }
       });
   }
   

   If you want to try to keep starts as close to 4000ms apart as possible, you could remember when check_getqueue was started and shave off the time the result took to come back:

   timer = setTimeout(check_getqueue, 4000);
   // ...
   
   function check_getqueue() {
       var started = Date.now();
       $.ajax({
           // ...
           complete: function() {
               timer = setTimeout(check_getqueue, Math.max(0, 4000 - (Date.now() - started)));
           }
       });
   }