javascript - 在 twilio php 中断开调用后停止计时器

Question

我正在使用 twilio api 在 php 中使用调用连接和断开连接模块，每当我断开连接时计时器就不会停止，这是我的代码

//点击接听按钮时开始计时

$('#answer').on('click', function() {

var countdown = document.getElementsByTagName('countdown')[0],
    start = document.getElementById('start'),
    stop = document.getElementById('stop'),
    clear = document.getElementById('clear'),
    seconds = 0, minutes = 0, hours = 0,
    t;

function add() {
    seconds++;
    if (seconds >= 60) {
        seconds = 0;
        minutes++;
        if (minutes >= 60) {
            minutes = 0;
            hours++;
        }
    }
countdown.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);

document.getElementById('checkyear').value = countdown.textContent;
    timer();
}
function timer() {
    t = setTimeout(add, 1000);
}
timer();
 }); 

//断开通话时计时器应停止

Twilio.Device.disconnect(function (conn) {
    clearTimeout(t);
    });

Answer 1

这里是 Twilio 开发者布道者。

我认为这里的问题是范围之一。您的变量 t 设置为您用于计时的超时 ID，它仅在您单击应答按钮时调用的事件处理函数中可用。

当它位于 Twilio.Device.disconnect 处理程序内部时，t 为 未定义。

我会重新排列您的代码，以便计时变量和函数位于单击事件处理程序之外，因此它们位于 disconnect 处理程序的范围内。像这样的事情:

var t, seconds, minutes, hours;

Twilio.Device.disconnect(function(conn) {
  clearTimeout(t);
});

function add() {
  seconds++;
  if (seconds >= 60) {
    seconds = 0;
    minutes++;
    if (minutes >= 60) {
      minutes = 0;
      hours++;
    }
  }
  countdown.textContent =
    (hours ? (hours > 9 ? hours : '0' + hours) : '00') +
    ':' +
    (minutes ? (minutes > 9 ? minutes : '0' + minutes) : '00') +
    ':' +
    (seconds > 9 ? seconds : '0' + seconds);

  document.getElementById('checkyear').value = countdown.textContent;
  timer();
}

function timer() {
  t = setTimeout(add, 1000);
}

$('#answer').on('click', function() {
  var countdown = document.getElementsByTagName('countdown')[0],
      start = document.getElementById('start'),
      stop = document.getElementById('stop'),
      clear = document.getElementById('clear');

  seconds = 0;
  minutes = 0;
  hours = 0;
  timer();
});