We Keep Coding

clearInterval() does not seem to work as expected

I am developing a JavaScript/WebRTC walkie-talkie app and require a button to be held down to send audio. It works fine until I click the right mouse button whilst holding the left which causes the setInterval function to continue working and clearInterval unable to stop it via its ID. It just continues on forever. According to everything I have read, clearInterval should stop it, especially if the interval is set globally.
var intervalId;
$("#transmitbutton").on("mousedown touchstart", function () {
intervalId = setInterval(function () {
console.log("PTT pressed");
}, 1000);
});
$("#transmitcontainer").on("mouseup touchend mouseleave", function () {
clearInterval(intervalId);
});
I have tried the start and stop buttons and it has the same outcome. clearInterval is not working.
var intervalId;
$("#transmitstart").on("click", function () {
intervalId = setInterval(function () {
console.log("PTT pressed");
}, 1000);
});
$("#transmitstop").on("click", function () {
clearInterval(intervalId);
});

If you happen to call your function that creates it more then one time you will have an interval that will not be cancelable since you will overwrite the interval id. So either you need to cancel it, or not make a new interval.
var intervalId;
$("#transmitbutton").on('mousedown touchstart', function() {
if (intervalId) return; // either exit out and not create a new one
// if (intervalId) clearInterval(intervalId); //or remove it here
intervalId = setInterval(function(){
console.log("PTT pressed");
}, 1000);
});
$("#transmitcontainer").on('mouseup touchend mouseleave', function() {
if (intervalId) clearInterval(intervalId);
intervalId = null;
});

Why isn't my Javascript function continuously firing with setTimeout/clearTimeout?

I have a webpage i'm working on with a carousel of sorts which auto rotates between 4 products/images. But it also has a hover feature which needs to stop the auto rotate and display just the product a user hovers on, and auto rotate resumes off hover. I have it working for the most part. The hover functionality is working as intended, problem is the auto rotate only cycles through one time. Why doesn't it keep cycling through despite my setTimeout function for autoRotate() calling itself again?
Relevant JS code with some edits for brevity and what not:
// Run autoRotate() on page load
$(document).ready(function () {
autoRotate();
});
// Place timeout functions for each product's function into
// a variable so the timeout can be cleared on hover
let product2Timer = setTimeout(setProduct2, 3000);
let product3Timer = setTimeout(setProduct3, 6000);
let product4Timer = setTimeout(setProduct4, 9000);
let autoRotateTimer = setTimeout(autoRotate, 12000);
// Main function
function autoRotate() {
setProduct1();
product2Timer ;
product3Timer ;
product4Timer ;
autoRotateTimer; // <--- This should call autoRotate() again (but it doesn't)?
}
// On product name hover, clear the timeouts so the rotator doesnt keep cycling on hover
// Off product name hover, reset timeouts and resume/call autoRotate() function
$(function () {
$(".rotator-item").hover(function () {
clearTimeout(product2Timer);
clearTimeout(product3Timer);
clearTimeout(product4Timer);
clearTimeout(autoRotateTimer);
},
function () {
product2Timer = setTimeout(setProduct2, 3000);
product3Timer = setTimeout(setProduct3, 6000);
product4Timer = setTimeout(setProduct4, 9000);
autoRotateTimer = setTimeout(autoRotate, 12000);
autoRotate();
});
});
function setProduct1() {
// Set product info/img/description etc...
}
function setProduct2() {
// Set product info/img/description etc...
}
function setProduct3() {
// Set product info/img/description etc...
}
function setProduct4() {
// Set product info/img/description etc...
}
//
// On hover styling/code
//
$(function () {
$(".product-1").hover(function () {
// Mouse over code
},
function () {
// Mouse out code...
});
});
// Other 3 product hover functions...
Thanks!

Use setInterval() to start a repeating action. Use setTimeout() to stagger their start times.
var interval1, interval2, interval3, interval4;
function startRotation() {
setTimeout(function() {
interval1 = setInterval(setProduct1, 12000);
}, 3000);
setTimeout(function() {
interval2 = setInterval(setProduct2, 12000);
}, 6000);
setTimeout(function() {
interval3 = setInterval(setProduct3, 12000);
}, 9000);
setTimeout(function() {
interval4 = setInterval(setProduct4, 12000);
}, 12000);
};
startRotation();
The hover handler can then clear all 4 interval timers, and then call startRotation() to start them again.

On mouse over enable button after 3 seconds, on mouse off disable and stop count down

I have a button that does something irreversible and I'm trying to put a lockout on it unless the user hovers over it for 3 seconds. If they wait 3 seconds the button becomes enabled. As soon as they mouse off it disables again. If they also mouse off during the count down of 3 seconds it stops the count down.
$('#delete_btn').on('mouseover', function () {
setTimeout(function () {
$('#delete_btn').prop('disabled', false)
}, 3000)
})
$('#delete_btn').on('mouseout', function () {
$('#delete_btn').prop('disabled', true)
})
I'm not sure how to stop the count down if they mouse out early

You need to clear the timeout. So, it's ready to fire on the next call:
var timeout;
$('#delete_btn').on('mouseover', function() {
timeout = setTimeout(function() {
$('#delete_btn').prop('disabled', false);
}, 3000);
});
$('#delete_btn').on('mouseout', function() {
clearTimeout(timeout);
$('#delete_btn').prop('disabled', true);
});
See it in work at CodePen:
https://codepen.io/aminshahrokhi/pen/VNJBYZ

this a copy-paste from W3School, basiclly you have to 'save' the timeout into a var, an then, on hover, clear the time out:
var myVar;
function myFunction() {
myVar = setTimeout(function(){ alert("Hello"); }, 3000);
}
function myStopFunction() {
clearTimeout(myVar);
}
I hope this helps :)

Stopping a timer

I have this JSFiddle that I am working on, and when my mouse leaves the textarea, it closes. But, I can't find a way to cancel this timer if I hover back over it. I've even tried some examples from here. This is the code that closes the text box --
function close() {
setTimeout(function() {
$(Img).css("transform", "rotateX(0deg)");
$(Txt).css("transform", "rotateX(90deg)");
}, 1000);
}
$(Txt).on("mouseleave", function() {
close();
$(Txt).blur();
});

The link you posted from W3Schools has exactly what you need...
setTimeout() returns a reference value, which you can pass to clearTimeout() later to cancel the timer.
var timerID; //set outside the function
function close() {
timerID = setTimeout(function() {
$(Img).css("transform", "rotateX(0deg)");
$(Txt).css("transform", "rotateX(90deg)");
}, 1000);
}
$(Txt).on("mouseleave", function() {
close();
$(Txt).blur();
});
//somewhere else do this...
clearTimeout(timerID);

setTimeout function returns you the handler which you can later use to reset the timer.
For example,
var myVar;
function myFunction() {
myVar = setTimeout(function(){ alert("Hello") }, 3000);
}
function myStopFunction() {
clearTimeout(myVar);
}

Have you tried:
var myTimeout;
function close() {
myTimeout = setTimeout(function() {
$(Img).css("transform", "rotateX(0deg)");
$(Txt).css("transform", "rotateX(90deg)");
}, 1000);
}
$(Txt).on("mouseleave", function() {
close();
$(Txt).blur();
}).on("mouseenter", function() {
clearTimeout(myTimeout);
});

Anonymous function in setTimeout not working

I'm trying to create a delay between two loops of the nivo-slider.
Without the setTimeout everything works just fine (but without delay). So the folloing example works:
$('#slider').nivoSlider({
lastSlide: function(){
$('#slider').data('nivo:vars').stop = true;
// setTimeout(function() {
$('#slider').data('nivo:vars').stop = false;
// }, 2000);
},
});
If I uncomment the setTimeout-lines the slider stops but does not start again? Any ideas why?
Update:
http://jsfiddle.net/kgYNX/
2nd update:
Tried it with a wrapping function, too. The function gets called but if I use setTimeout in the new function it stops working: http://jsfiddle.net/kgYNX/1/

Solved it slightly different:
beforeChange: function(){
$('#slider').data('nivo:vars').stop = true;
var delay = 0;
if ($('#slider').data('nivo:vars').currentSlide == $('#slider').data('nivo:vars').totalSlides - 2) {
delay = 2000;
}
setTimeout(function() {
$('#slider').data('nivo:vars').stop = false;
}, delay);
}
I don't know why "totalSlides - 2", but it works: http://jsfiddle.net/kgYNX/15/

As a variant, you may add custom option to slider vars collection to prevent stop execution on lastSlide handler when slider re-enabled by timeout:
lastSlide: function () {
var dontStop = $('#slider').data('nivo:vars').dontStopOnLast;
if (!dontStop) {
$('#slider').data("nivoslider").stop();
setTimeout(function () {
$('#slider').data("nivoslider").start();
}, 2000);
}
$('#slider').data('nivo:vars').dontStopOnLast = !dontStop;
}