setInterval javascript function being called many times

Question

(See fiddler at the bottom) I'm working with calls time values. I get the arrival time for the call when the call arrive to a queue and from that time I'm counting how long the call had been waiting in the queue.The goal is to show the longest waited call in the queue. So if i get two calls, first i need to show the first one in a timer and when they answer it I need to reset the timer for the second call's arriving time and start counting. Whenever I get a new call in the queue I get its arrival time then I use a timer that starts from that time. the problem I'm getting here is that my function is being called as many times as the number of the calls I have which makes the timer add many seconds at the same time .

HandleResponseGroupeQueues: function (interactionQueueId, availableAgents, queueArrivalTime) {

    queueArrivalTime = parseInt(queueArrivalTime.substr(6)).toString();
    if (queueArrivalTime.startsWith('-')) {

        arrivalTimeField.text("00:00:00");
    }
    else {
       // debugger;
        var date = Math.round(new Date().getTime() / 1000.0); // current time in seconds
        queueArrivalTime = Math.round(new Date(parseInt(queueArrivalTime)).getTime() / 1000.0); // call arrival time in seconds
        var startTime = date - queueArrivalTime;
        var timeSinceCallCameInQueue = toHHMMSS(startTime);
        arrivalTimeField.text(timeSinceCallCameInQueue);
        setTime = setInterval(function () { waitingCallstimer(arrivalTimeField); }, 1000); //here is my timer
    }

    if (arrivalTimeField.text() === "00:00:00") {
        clearInterval(setTime);

I convert the time I'm getting to make it human readable the I call serInterval() every second. The timer looks like this:

function waitingCallstimer(arrivalTimeField) {

var textTime = arrivalTimeField.text();
var  hours = textTime.substring(0, 2),
     minutes = textTime.substring(3, 5),
     seconds = textTime.substring(6, 8);

seconds = timeControl(parseInt(seconds) + 1);

if (seconds === 60) {
    seconds = '00';
    minutes = timeControl(parseInt(minutes) + 1);
    if (minutes === 60) {
        minutes = '00';
        hours = timeControl(parseInt(hours) + 1);
    }
}
timeControl(hours),
timeControl(minutes),
timeControl(seconds);
arrivalTimeField.text(hours + ':' + minutes + ':' + seconds);

And the timeControl() is only for adding a 0 if the number i get is below 10. Is there any way to fix this or redo this code to get it right? thax!

http://jsfiddle.net/ye7on8Lq/ See here! by clicking the button the timer will be run fast

Answer 1

Update: Forked the JS fiddle and fixed this using a call Array http://jsfiddle.net/o7sdc77z/

Update: Updated with the code in JS Fiddle. This fixes the issue, and there is significant refactoring.

Basic Idea

• Every time a call id added, push it into an Array callStartTimeArray
• Every time a call is done( can be simulated by Curren call Done button), the entry for that call is removed from that array. And the next in the list is handled with HandleResponseGroupeQueues
• Instead of parsing the call duration from arrivalTimeField , a variable is currentCallTime is used to keep track of the duration of current call.

HTML

<span class="time_1"></span>
<input type="button" id="add-btn" value="Add Call" />
<input type="button" id="remove-btn" value=" Current Call Done" />

JS

  var callStartTimeArray = [];
  var arrivalTimeField = $('.time_1');
  var setTime;
  var currentCallTime = 0;

  function HandleResponseGroupeQueues(queueId, availableAgents, queueArrivalTime) {
           if(setTime){
                clearInterval(setTime);
            }
           if(!queueArrivalTime){
              return ;
           }
            var date = Date.now(); // current time in milli seconds

            var startTime = Math.round((date - queueArrivalTime)/1000);
            var timeSinceCallCameInQueue = toHHMMSS(startTime);
            arrivalTimeField.text(timeSinceCallCameInQueue);

            setTime = setInterval(function () {      
                waitingCallstimer(arrivalTimeField); }, 1000);

    }

    function waitingCallstimer(arrivalTimeField) {
      currentCallTime++;

      arrivalTimeField.text(toHHMMSS(currentCallTime));

}

function timeToSeconds(time) {
    var parts = time.split(':');
    return (+parts[0]) * 60 * 60 + (+parts[1]) * 60 + (+parts[2]);
}

//converts seconds to total time
function toHHMMSS(sec) {
    var secNum = parseInt(sec, 10);
    var hours = timeControl(Math.floor(secNum / 3600)),
        minutes = timeControl(Math.floor((secNum - (hours * 3600)) / 60)),
        seconds = timeControl(secNum - (hours * 3600) - (minutes * 60));

    var time = hours + ':' + minutes + ':' + seconds;

    return time;
}




function timeControl(time) {
    if (time ==='00') {
       return time;
    }
    if (time < 10 ) {
        time = '0' + time;
    }
    return time;
}

$('#add-btn').click(function(){

    var currTime = Date.now();
    callStartTimeArray.push(currTime);
    if(callStartTimeArray.length == 1) {
        HandleResponseGroupeQueues(1, 2, currTime);
    }
    console.log('Added one more call---', callStartTimeArray);
});

$('#remove-btn').click(function(){
   callStartTimeArray.shift();
   //reset the text in textfield
   currentCallTime = 0;
   arrivalTimeField.text("00:00:00");

   //Handle the next call in Queue
   HandleResponseGroupeQueues(1, 2,callStartTimeArray[0]);
   console.log('After Last Call is done---', callStartTimeArray);
});