setInterval javascript函数被多次调用

Question

（请参阅底部的提琴手）我正在使用通话时间值。 当呼叫到达队列时，我会得到呼叫的到达时间，从那时起我开始计算呼叫在队列中等待了多长时间，目的是显示队列中等待时间最长的呼叫。 因此，如果我接到两个电话，首先我需要在计时器中显示第一个电话，当他们接听电话时，我需要为第二个电话的到达时间重置计时器并开始计数。 每当我在队列中接到新电话时，都会得到到达时间，然后使用从该时间开始的计时器。 我在这里遇到的问题是，我的函数被调用的次数与我拥有的调用次数相同，这使计时器同时增加了许多秒 。

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);

我转换了使人可读的时间，即serInterval()调用serInterval() 。 计时器如下所示：

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);

而且timeControl()仅在我得到的数字低于10时才添加0。是否有任何方法可以解决此问题或重做此代码以使其正确？ ！

http://jsfiddle.net/ye7on8Lq/ 看到这里！ 通过单击按钮，计时器将快速运行

Answer 1

更新：分叉了JS小提琴，并使用调用数组http://jsfiddle.net/o7sdc77z/修复了此问题

更新：使用JS Fiddle中的代码更新。 这解决了该问题，并且进行了大量重构。

基本思想

• 每次添加呼叫ID时，将其推入Array callStartTimeArray
• 每次通话完成（可以通过Curren call Done按钮模拟），该通话的条目将从该数组中删除。 列表中的下一个由HandleResponseGroupeQueues处理
• 而不是从arrivalTimeField解析呼叫持续时间，而是使用变量currentCallTime来跟踪当前呼叫的持续时间。

的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);
});