Остановить таймер после разъединения вызова в twilio php

Question

Я работаю с модулем подключения и отключения вызовов в php, используя twilio api, Всякий раз, когда я отключаюсь, таймер не останавливается, Вот мой код

// таймер запуска при нажатии на кнопку ответа

$('#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, для которой задан идентификатор тайм-аута, который вы используете для отсчета времени, доступна только в функции обработки событий, которая вызывается при нажатии кнопки ответа.

Когда он находится внутри обработчика Twilio.Device.disconnect, t равен undefined.

Я бы переставил ваш код таким образом, чтобы переменные и функции синхронизации находились вне обработчика события click, чтобы они находились в области видимости для обработчика 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();
});