Develop Reference

Stop timer after disconnect call in twilio php

I am working with call connect and disconnect module in php using twilio api,Whenever i disconnect then timer not stop, Here is my code
//timer start when click on answer button
$('#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();
});
//Timer should stop when disconnect the call
Twilio.Device.disconnect(function (conn) {
clearTimeout(t);
});

Twilio developer evangelist here.
I think the issue here is one of scope. Your variable t, which is set to the ID of the timeouts you are using to count time up, is only available within the event handling function that is called when you click on the answer button.
When it's inside the Twilio.Device.disconnect handler, t is undefined.
I would rearrange your code so that the timing variables and functions are outside of the click event handler, so they are in scope for the disconnect handler. Something like this:
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();
});

Stop a Javascript countdown

I'm working on a pomodoro clock, everthing is working well but when the user clicks to run the the counter more than once I get two counters working I would like to pause the counter and not start another.
function countdown(minutes) {
let seconds = 60;
let mins = minutes;
function tick() {
let current_minutes = mins-1;
seconds--;
time.innerHTML = current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
if( seconds > 0 ) {
setTimeout(tick, 1000);
} else {
if(mins > 1){
countdown(mins-1);
}
}
console.log(mins);
if (seconds === 0 && mins === 1) {
time.innerHTML = `${sessionLength}:00`;
rounds++;
console.log(rounds);
PlaySound(sound);
}
}
tick();
}
how can I accomplish this?

Why not use setInterval?
var myPomodoro = setInterval(function(){
//... run code in here every 60 seconds
}, 60000);
// stop the timer
clearInterval(myPomodoro);

Hiding div classes when timer ends in Javascript

I have a timer script but I am having a few issues with it. Just a day ago, it was working perfectly fine, as intended. Now, the timer no longer hides the div class when it ends. Didn't change the HTML or JavaScript code at all, but for whatever reason it no longer removes the div class.
Here is the JavaScript code:
function startTimer(duration, display) {
var timer = duration,
minutes,
seconds;
setInterval(function() {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;
display.textContent = minutes + ' ' + ' ' + seconds;
if (--timer < 0) {
display.textContent = 'OFFER HAS EXPIRED.';
$('.formme').css('visibility', 'hidden');
}
console.log(parseInt(seconds));
window.localStorage.setItem('seconds', seconds);
window.localStorage.setItem('minutes', minutes);
}, 1000);
}
window.onload = function() {
sec = parseInt(window.localStorage.getItem('seconds'));
min = parseInt(window.localStorage.getItem('minutes'));
if (parseInt(sec) == 0 && parseInt(min) == 0) {
$('#time').text('OFFER HAS EXPIRED.');
$('.formme').css('visibility', 'hidden');
} else {
var start = 5 * 60;
if (sec > 0 || min > 0) {
start = parseInt(min * 60) + sec;
}
// var start = 60 * 5;
display = document.querySelector('#time');
startTimer(start, display);
}
};
On top of that, I used localStorage to prevent the timer from resetting when the webpage is refreshed. However, when the timer is finished, instead of going straight to the "OFFER HAS EXPIRED" text, it counts down from 00:01 then displays the text. Can anyone help me out? Thanks in advance!

Stopwatch in Javascript is slower than normal time

I want to make a stopwatch in JavaScript that could count milliseconds, seconds and minutes. This is what I have: (you can stop the timer by pressing space)
var counter = document.getElementsByTagName('h1')[0];
var miliseconds = 0;
var seconds = 0;
var minutes = 0;
function Add() {
miliseconds++;
if (miliseconds >= 99) {
miliseconds = 0;
seconds++;
if (seconds >= 59) {
seconds = 0;
minutes++;
}
}
counter.textContent = (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" +
(seconds ? (seconds > 9 ? seconds : "0" + seconds) : "00") + ":" +
(miliseconds ? (miliseconds > 9 ? miliseconds : "0" + miliseconds) : "00");
Timer();
}
function Timer() {
t = setTimeout(Add, 10);
}
Timer();
document.addEventListener("keypress", function(e) {
if (e.keyCode === 32) {
clearTimeout(t);
}
});
<h1 id="counter">00:00:00</h1>
The problem is that it seems to not go at the proper speed, meaning that when I compare it to other timers, it gradually becomes slower than them (i.e the speed at which the timer is counting slows down over time). So suddenly, there are 5-second differences, then it becomes 7-second differences and so on.
Any help would be appreciated.

You should create a startTime variable, then calculate the elapsedTime, and use that to calculate additional variable to show.
var startTime = Date.now();
setTimeout(function(){
var elapsedTime = Date.now() - startTime;
// Additional code to calculate hour, minute, second, milisecond here
}, 10);

My Javascript Timer Speeds Up Every Time I Press the "Start" button

Every time I click the "start" button the timer speed up. And in reverse if you press the "stop" button it starts to slow down and eventually stops. Any way to stop this and just make it where when you press "start" it starts but doesn't speed up?
function timeKeeper() {
var h1 = $('#headTime')[0],
start = $('#start'),
stop = $('#stop'),
clear = $('#clear'),
seconds = 0,
minutes = 0,
hours = 0,
t;
function add() {
seconds++;
if (seconds >= 60) {
seconds = 0;
minutes++;
if (minutes >= 60) {
minutes = 0;
hours++;
}
}
h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours) :
"00") + "." + (minutes ? (minutes > 9 ? minutes : "0" + minutes) :
"00") + "." + (seconds > 9 ? seconds : "0" + seconds);
timer();
}
function timer() {
t = setTimeout(add, 1000);
}
/* Start button */
$('#start').on('click', function() {
timer();
});
/* Stop button */
$('#stop').on('click', function() {
clearTimeout(t);
});
/* Clear button */
$('#clear').on('click', function() {
h1.textContent = "00.00.00";
seconds = 0;
minutes = 0;
hours = 0;
});

You need to cancel the old timer when you start a new one.
$('#start').on('click', function() {
clearTimeout(t);
timer();
});