We Keep Coding

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

Jquery function is starting on click but I need to stop it

I always wonder that onclick functions start to a javascript or jQuery, but How does it stop? Finally, I faced with a function in my learning progress. May you help me to find a solution?
I want to stop this function on another onclick:
function live_preview() {
var icon = document.getElementById('LivePreIcon');
if (icon.classList.contains('fa-eye-slash')) {
icon.classList.remove('fa-eye-slash');
icon.classList.add('fa-eye');
$('#result').keyup(function () {
$('#dialog').html($(this).val());
});
return;
}
if (icon.classList.contains('fa-eye')) {
icon.classList.remove('fa-eye');
icon.classList.add('fa-eye-slash');
// Stop the jquery function here
return;
}
}

var play=0;
function live_preview() {
var icon = document.getElementById('LivePreIcon');
var play;
if(!play){
if (icon.classList.contains('fa-eye-slash')) {
icon.classList.remove('fa-eye-slash');
icon.classList.add('fa-eye');
$('#result').keyup(function () {
$('#dialog').html($(this).val());
play = 1;
});
return;
}
}
else{
if (icon.classList.contains('fa-eye')) {
icon.classList.remove('fa-eye');
icon.classList.add('fa-eye-slash');
play=0;
return false;
// Stop the jquery function here
}
}
}

during scroll call a function only once

I have a counter on a page. When I scroll to it I need start it only once. but now it starts twice during next scroll. Thank's.
var quit = false;
$(window).scroll(function() {
// ...
something();
function something() {
if (quit == true) {
return;
}
quit = true;
setTimeout(function() {
$(begin).html(2002);
}, 500); // this function must be call only once
}
}
}

$(document).on('scroll', function() {
something();
$(document).off('scroll');
});

this solution helped me https://github.com/HubSpot/odometer/issues/35
my second mistake was creating "new odometer" object

How to kill a looping function in jquery

I created a function that iterates over a set of divs, looping, fading in and out the next one.
What I am trying to do is to stop it upon either 'click', if/else, or focus. In doing some searching, it seems that I can utilize the setTimeout - clearTimeout functions. However I am a bit unclear on how to go about it, and maybe implementing it incorrectly.
Fiddle Me This Batman
HTML:
Kill Loop Function
<div id="productBox">
<h3>Dynamic Title Here</h3>
<div class="divProduct">
<!-- product image -->
<div class="product-discription">
<h4>Product 1</h4>
<p>Cras justo odio, dapibus ac facilisis in.</p>
Learn More
</div>
</div>
<!-- Repeat '.divProduct' over and over -->
</div>
JS:
timer = null;
function productTypeCycle(element) {
timer = setTimeout(function() {
element.fadeIn()
.delay(1000)
.fadeOut(function() {
if(element.next().length > 0) {
productTypeCycle(element.next());
}
else {
productTypeCycle(element.siblings(":nth-child(2)"));
}
});
}, 500);
}
$(document).ready(function() {
productTypeCycle($(".divProduct:first"));
$(".killFunc").click(function(e) {
e.preventDefault();
if(timer !== null) {
clearTimeout(timer);
}
});
});
Of course, as usual, I am probably way over thinking something that could be so simple.

the problem here is that you stop your timer correctly, but sadly your timer has internally via jQuery started another "timer" for the animations.
you would need to stop the animation instead of the timer:
var animationEle = null;
function productTypeCycle(element) {
animationEle = element;
element.fadeIn()
.delay(1000)
.fadeOut(function () {
if (element.next().length > 0) {
productTypeCycle(element.next());
} else {
productTypeCycle(element.siblings(":nth-child(2)"));
}
});
}
$(document).ready(function () {
productTypeCycle($(".divProduct:first"));
$(".killFunc").click(function (e) {
e.preventDefault();
if (animationEle)
$(animationEle).stop(true, false);
});
});
working fiddle

Another (cleaner) way to go about it, is to let the last animation finish, but set a value to stop any further animations.
http://jsfiddle.net/hhwfq/54/
Like this.
timer = null;
var animationCancelled = false;
function productTypeCycle(element) {
timer = setTimeout(function() {
element.fadeIn()
.delay(1000)
.fadeOut(function() {
if(animationCancelled) return;
if(element.next().length > 0 ) {
productTypeCycle(element.next());
}
else {
productTypeCycle(element.siblings(":nth-child(2)"));
}
});
}, 500);
}
$(document).ready(function() {
productTypeCycle($(".divProduct:first"));
$(".killFunc").click(function(e) {
e.preventDefault();
if(timer !== null) {
clearTimeout(timer);
animationCancelled = true;
}
});
});

The issue is the fade, not the timer. The fade is still executing. You need to run $(element).stop(); on all the elements that have started an animation otherwise they'll just continue.

jQuery Set wait time before a function executes

How can i set wait time for this function.
function UpdateMedicaitonHistory(data) {
MedicaitonHistoryGrid();
//set a wait time to finish MedicaitonHistoryGrid() like for 3 seconds
// then execute the below code.
if ($("#MedHistoryGridSec").is(":visible")) {
alert("yes we have grid");
}
else{
alert("No Grid");
}
}

You can use setTimeout:
setTimeout(function()
{
if($('#MedHistoryGridSec').is(':visible'))
alert('yes');
else
alert('no');
}, 3000);

You could wrap up the code in a callback function and run it after three seconds using window.setTimeout:
var afterThreeSeconds = function() {
if ($("#MedHistoryGridSec").is(":visible")) {
alert("yes we have grid");
}
else{
alert("No Grid");
}
}
window.setTimeout(afterThreeSeconds, 3000);

Can you add a parameter to the medication history grid function taking a function containing the code you want executed after that function succeeds which you can then call at the end of the medication history grid function?