I have the following code. This is what I tried to clear the interval, but it didn't work. Kindly help me.
$(document).ready(function(){
var intervalId;
$(window).focus(function(){
var intervalId = setInterval(function(){
console.log('working');
}, 5000);
});
$(window).blur(function(){
clearInterval(intervalId);
});
});
Do not redeclare intervalId, then it becomes a local scope to the focus function:
$(window).focus(function() {
intervalId = setInterval(function() {
console.log('working');
}, 5000);
});
Consider this part:
$(document).ready(function() {
var intervalId;
$(window).focus(function() {
// intervalId is not the same as the `window.intervalId`
// The scope changes.
var intervalId = setInterval(function() {
//------^^^---------- Remove this var.
});
});
});
Related
I have a lot of input fields with the same class. When the user finishes typing the function doneTyping should run.
I tried this but somehow it doesn't work.
Can I use one function for all the input fields I have?
$(function() {
console.log('ready');
var timer;
var doneTypingInt = 5000;
$('.typing').keyup(function(){
clearTimeout(timer);
if ($('.typing').val()) {
timer = setTimeout(doneTyping, doneTypingInt);
}
});
function doneTyping () {
console.log('function doneTyping');
}
});
what you're looking for is debounce
$('.typing').keypress(_.debounce(yourfunc, 3000))
You basically want to use the keypress function. Your adjusted code:
$(function() {
console.log('ready');
var timer;
var doneTypingInt = 5000;
$('.typing').keypress(function(event){
if(timer) {
clearTimeout(timer);
timer = null;
}
timer = setTimeout(doneTyping, doneTypingInt);
});
function doneTyping () {
console.log('function doneTyping');
}
});
I don't think that you have something wrong in your code, you just have to wait 5 seconds to see the result, and in order to use one function for all inputs with the "typing" class, you should use the bind method as follows:
Javascript code: (Jsfiddle)
$(function() {
console.log('ready');
var timer;
var doneTypingInt = 1000;
$('.typing').keyup(function(){
clearTimeout(timer);
if ($('.typing').val()) {
timer = setTimeout(doneTyping.bind($(this)), doneTypingInt);
}
});
function doneTyping () {
alert('function doneTyping ' + this.val());
}
});
JSFiddle link: http://jsfiddle.net/lustre/awpnd6L1/1/
Was wondering if there was a way I could create a function in JavaScript, so that I'm not having to copy the mouseenter code each time I need a "More Info" tooltip. Is this even possible?
Below is the JavaScript I'm looking to condense into a function so that I don't have to copy it several times.
jQuery(".bspaMoreInfo").mouseenter(function(){
clearTimeout(jQuery('.bspaMoreInfoText').data('timeoutId'));
jQuery('.bspaMoreInfoText').show(200);
}).mouseleave(function(){
var timeoutId = setTimeout(function(){
jQuery('.bspaMoreInfoText').hide(200);
}, 650);
jQuery('.bspaMoreInfoText').data('timeoutId', timeoutId);
});
jQuery(".bspaMoreInfoText").mouseenter(function(){
clearTimeout(jQuery('.bspaMoreInfoText').data('timeoutId'));
}).mouseleave(function(){
var timeoutId = setTimeout(function(){
jQuery('.bspaMoreInfoText').hide(200);
}, 650);
jQuery('.bspaMoreInfoText').data('timeoutId', timeoutId);
});
Hope this makes sense x3
You can create custom jQuery plugin for this job. This is the very natural approach in term of handling repetitive code.
$.fn.moreInfo = function() {
return this.each(function() {
var $text = $(this).next();
$(this).mouseenter(function () {
clearTimeout($text.data('timeoutId'));
$text.show(200);
})
.mouseleave(function () {
$text.data('timeoutId', setTimeout(function () {
$text.hide(200);
}, 650));
});
$text.mouseenter(function () {
clearTimeout($text.data('timeoutId'));
}).mouseleave(function() {
$text.data('timeoutId', setTimeout(function () {
$text.hide(200);
}, 650));
});
});
};
jQuery(document).ready(function () {
$(".bspaMoreInfo").moreInfo();
});
Demo: http://jsfiddle.net/awpnd6L1/3/
DEMO
jQuery(document).ready(function(){
jQuery(".bspaMoreInfo").mouseenter(function(){
clearTimeout($(this).next().data('timeoutId'));
$('.bspaMoreInfoText').hide(200);
$(this).next().show(200);
}).mouseleave(function(){
var timeoutId = setTimeout(function(){
$(this).next().hide(200);
}, 650);
$(this).next().data('timeoutId', timeoutId);
});
jQuery(".bspaMoreInfoText").mouseenter(function(){
clearTimeout(jQuery('.bspaMoreInfoText').data('timeoutId'));
}).mouseleave(function(){
var timeoutId = setTimeout(function(){
jQuery('.bspaMoreInfoText').hide(200);
}, 650);
jQuery('.bspaMoreInfoText').data('timeoutId', timeoutId);
});
});
Something like this ?
function MouseEnter(ctrl) {
clearTimeout($(ctrl).data('timeoutId'));
$(ctrl).show(200);
}
function MouseLeave(ctrl) {
var timeoutId = setTimeout(function(){
$(ctrl).hide(200);
}, 650);
$(ctrl).data('timeoutId', timeoutId);
}
$(".bspaMoreInfo").mouseenter(function () {
MouseEnter($(".bspaMoreInfoText"));
}).mouseleave(function() {
MouseLeave(this);
}));
$(".bspaMoreInfoText").mouseenter(function () {
MouseEnter($(".bspaMoreInfoText"));
}).mouseleave(function() {
MouseLeave($(".bspaMoreInfoText"));
}));
This question already has answers here:
How can I use setInterval and clearInterval?
(5 answers)
Closed 8 years ago.
http://jsfiddle.net/x5MY8/2/
HTML
<div id="easy">easy</div>
<div id="hard">hard</div>
JS
function test(mode) {
var asd = this;
this.mode = mode;
setInterval(function () {
alert(asd.mode);
}, 1000);
}
$(document).ready(function () {
$('#easy').on('click', function () {
var stuff = new test('easy');
});
$('#hard').on('click', function () {
var stuff = new test('hard');
});
});
Upon pressing the easy button, an event launches that alerts easy every second. If I press hard afterwards, it will start another event, and it will alert easy, hard, easy, hard.., but I want it to alert only what was pressed at the moment, so I have to clear the previous interval somehow. How can I do that? Somehow, I need to call clearInterval when a button is pressed on the other object, but I don't really know how to.
http://jsfiddle.net/x5MY8/3/
You need to store and clear the interval like so
var interval;
function test(mode) {
var asd = this;
this.mode = mode;
if (interval) {
clearInterval(interval);
}
interval = setInterval(function () {
alert(asd.mode);
}, 1000);
}
Store it in a variable:
var interval = setInterval(function(){
//your code
},1000);
Now, you can clear using clearInterval:
clearInterval(interval);
clear the value when every clicked
var clear=0;
function test(mode) {
var asd = this;
this.mode = mode;
clear=setInterval(function () {
alert(asd.mode);
}, 1000);
}
$(document).ready(function () {
$('#easy').on('click', function () {
clearInterval(clear);
var stuff = new test('easy');
});
$('#hard').on('click', function () {
clearInterval(clear);
var stuff = new test('hard');
});
});
i am using jquery function setinterval and than clearinterval to clear it.. but i the clearinterval is not working .. here is my code.
$('#autoslide').click(function(){
if($('#autoslide').is(':checked')){
var interval = setInterval(function() {
$('.magazine').turn('next');
}, 2000);
}else
{
//stopinterval(interval)
clearInterval(interval);
//window.clearInterval(interval);
// interval = null
}
});
none of these tries are working
Make your timer variable outside the function.
var interval;
$('#autoslide').click(function(){
if($('#autoslide').is(':checked')){
interval = setInterval(function() {
$('.magazine').turn('next');
}, 2000);
}else
{
//stopinterval(interval)
clearInterval(interval);
//window.clearInterval(interval);
// interval = null
}
});
You need to use a global variable. If you use a local variable, each click handler invocation has its own copy of the variable.
var interval;
$('#autoslide').click(function(){
if($('#autoslide').is(':checked')){
interval = setInterval(function() {
$('.magazine').turn('next');
}, 2000);
}else
{
//stopinterval(interval)
clearInterval(interval);
//window.clearInterval(interval);
// interval = null
}
});
var message;
function Message(message) {
(function () {
$('#configMsg').html(message);
}());
this.timer = setTimeout(function () {
$('#configMsg').html('');
}, 5000);
}
$('#foo').click(function () {
message = new Message('foo');
});
$('#bar').click(function () {
message = new Message('bar');
});
What I'm trying to do is display message for 5 seconds, but if I display a new message the timer should be reset to 5 seconds.
My theory was that if I overwrite the message var which contains a Message function with a new Message function the old one will be destroyed along with the timer that it contains.
But its not working out, I think the old timer still exists as sometimes a message is displayed for less than 5 seconds.
Here is a fiddle http://jsfiddle.net/sgRrk/
function Message(message) {
var elem = $('#configMsg');
elem.html(message);
window.clearTimeout(elem.data("timer")); //if there is a previous timer, cancel it
elem.data("timer", setTimeout(function () { //store the timer reference to remove
elem.html('');
}, 5000));
}
What about a function that has a private timer and a public messsage() method?
function messager() {
var timer;
return {
message : function(message){
$('#configMsg').html(message);
clearTimeout(timer);
timer = setTimeout(function () {
$('#configMsg').html('');
}, 5000);
}
};
}
var msgr = new messager();
$('#foo').click(function () {
msgr.message('foo');
});
$('#bar').click(function () {
msgr.message('bar');
});
Fiddle THIS!
If you want to overwrite a variable that is part of an object, as in this.timer, don't create new instances of the object on every click, do it the easy way and use the same function, and clear the timeout on subsequest clicks
function message(message) {
$('#configMsg').html(message);
clearTimeout(this.timer);
this.timer = setTimeout(function () {
$('#configMsg').html('');
}, 5000);
}
$('#foo').click(function () {
message('foo');
});
$('#bar').click(function () {
message('bar');
});
FIDDLE
You want to clear your timer each time you create a new message.
var message;
var timer;
function Message(message) {
clearTimeout(timer);
(function () {
$('#configMsg').html(message);
}());
timer = setTimeout(function () {
$('#configMsg').html('');
}, 5000);
}
$('#foo').click(function () {
message = new Message('foo');
});
$('#bar').click(function () {
message = new Message('bar');
});
You need to save a timeout reference and reset it when a new timeout is created:
var message,
timer;
function Message(message) {
(function () {
$('#configMsg').html(message);
}());
if ( typeof timer != 'undefined' ) {
clearTimeout( timer );
delete timer;
}
timer = setTimeout(function () {
$('#configMsg').html('');
}, 5000);
}
$('#foo').click(function () {
message = new Message('foo');
});
$('#bar').click(function () {
message = new Message('bar');
});
Fiddle