setTimeout works, but clearTimeout is wrong. pn267 is a Navi-Div and uk267 is the first Level from Navi-Div. But in a extra Div.
var myTimer;
$('.pn267').hover(function() {
$('.uk267').animate({ opacity : 'show', height : 'show'}, 'fast');
});
$('.pn267').mouseout(function() {
$(this).data('myTimer', setTimeout('$(".uk267").hide()', 500));
});
$('.uk267').hover(function() {
myTimer = $(this).data('myTimer');
clearTimeout('myTimer');
});
Try getting rid of the quotes: clearTimeout(myTimer);
You are passing a string. You need to pass the variable associated with the timeout itself.
Also I don't see a reason to use $().data. Just use myTimer = setTimeout(function(){$(".uk267").hide();}, 500);.
Related
Wow.. to get real information about 'this' is not easy as google basically ignores the word.
The code opens an image from a database using the information from thumbnail.. the onlick works, and the hover code works, but I can't figure out how to get 'this' from the mouseenter to be used in the showModal function.
function showModal() {
$("body").css("overflow-y", "hidden");
$(".small").removeClass("smallHover");
$(".modal").fadeIn(200);
var altLong = $(this).attr("alt");
var altSplit = altLong.split("#");
$(".picTitle").text(altSplit[0]);
var srclong = $(this).attr("src");
var srcshort = srclong.split("_");
var srcextension = srclong.split(".");
$(".big").attr("src", srcshort[0]+'.'+srcextension[1]);
}
$(".small").click(showModal);
var timer;
$(".small").mouseenter(function() {
timer = setTimeout(function(){
$(this).showModal(); // **<--this is the line that doesnt work**
}, 2000);
}).mouseleave(function() {
clearTimeout(timer);
});
also if you could explain why you would use $(this) as a jquery object instead of just 'this' and how they differ, that would be great. Thanks in advance~!
There are two separate aspects to this.
Getting the right this in the setTimeout callback
Calling showModal with that this
#1 is addressed by this question's answers. You have several options, the simplest in this case (for now) probably being to use a variable:
$(".small").mouseenter(function() {
var _this = this; // ***
timer = setTimeout(function(){
$(_this).showModal(); // ***
}, 2000);
}).mouseleave(function() {
clearTimeout(timer);
});
...but that code still won't work, because showModal isn't a property of jQuery objects, it's a standalone function. To call it with a specific this, you'd use Function.prototype.call:
$(".small").mouseenter(function() {
var _this = this;
timer = setTimeout(function(){
showModal.call(_this); // ***
}, 2000);
}).mouseleave(function() {
clearTimeout(timer);
});
(Alternately, change showModal to accept the element as a parameter and then just pass it as an argument.)
More on this in this question's answers as well, as well as this (old) post on my anemic little blog.
this will also work if you could change your showModel function like this :
$.fn.showModal = function() {
$("body").css("overflow-y", "hidden");
$(".small").removeClass("smallHover");
$(".modal").fadeIn(200);
...
}
and inside timer method
$(this).showModal();
why does setTimeout not work? And how to do this action properly? I need to get 30s delay every submit. Sorry for newbie question, but i am newbie.
if (event.target.id.indexOf('submit') === 0)
{ post1000.submit(); setTimeout('post1001.submit();', 30000); }
{ post1001.submit(); setTimeout('post1002.submit();', 60000); }
...
{ post5092.submit(); setTimeout('post5093.submit();', 122790000); }
}, false);
You can also try something like this;
setTimeout(yourSubmitFunction, 3000)
function yourSubmitFunction() {
//do whatever you want to do you can define submit here
}
You can call setTimeout in a loop, like for each element in your array which has your "post****" variables.
I believe you shouln't use a string as first parameter for setTimeout();
Here is this function definition :
setTimeout(function,milliseconds,param1,param2,...)
Try with this code sample, or update yours accordingly :
setTimeout(function(){ alert("Hello"); }, 3000);
I the given code, I am using setInterval() and clearInterval() methods.
Here are two buttons for setInterval() and two for clearInterval(), if I click both setInterval() buttons, then the clearInterval() buttons doesn't work.
HTML:
<div id="a"></div>
<button id='bt1'>start</button>
<button id='bt2'>Stop</button>
<button id='bt3'>Start</button>
<button id='bt4'>Stop</button>
Javascript:
var Graph = {
graph: null,
start: function (i) {
this.graph = setInterval(function () {
$('#a').html(i++);
}, 1000);
},
stop: function () {
window.clearInterval(this.graph);
}
};
$('#bt1').click(function(){
Graph.start(1);
});
$('#bt2').click(function(){
Graph.stop();
});
$('#bt3').click(function(){
Graph.start(1);
});
$('#bt4').click(function(){
Graph.stop();
});
Fiddle: Fiddle
As the other answers, the first timer ID is overwritten. Try to store the IDs separately in an array or at least as separate variable names. Here is one adjustment using an array:
var Graph = {
graph: [0, 0], /// turn this into an array
start: function(id, i) { /// add a new parameter here
this.graph[id] = setInterval(function () {
$('#a').html(i++);
}, 1000);
},
stop: function (id) { /// add parameter here as well
window.clearInterval(this.graph[id]);
}
};
$('#bt1').click(function(){
Graph.start(0, 1); /// set index 0 with this timer id
});
$('#bt2').click(function(){
Graph.stop(0); /// stop using id at index 0
});
$('#bt3').click(function(){
Graph.start(1, 1); /// etc.
});
$('#bt4').click(function(){
Graph.stop(1);
});
Your i variable may be subject to the same thing depending on what you try; I haven't addressed that here.
Hope this helps.
You only have a single variable to store the result of both calls to setInterval, i.e. you are overwriting it on the second call so the first timer can't be cleared.
The clearInterval() method clears a timer set with the setInterval() method.
The ID value returned by setInterval() is used as the parameter for the clearInterval() method.
Note: To be able to use the clearInterval() method, you must use a global variable when creating the interval method:
myVar = setInterval("javascript function",milliseconds);
Then you will be able to stop the execution by calling the clearInterval() method.
You can also refer to this answer
If you click the #bt1 button and then the #bt3 button, the second start() function call will overwrite the graph variable in the Graph object. So the ID value returned by first setInterval() call is lost, you cannot clear the first timer.
Just put the following line of code before the setInterval() call in the start() method. This will stop the previous running timer:
if (this.graph) { this.stop(); }
Like this:
var Graph = {
graph: null,
start: function (i) {
if (this.graph) { this.stop(); }
this.graph = setInterval(function () {
$('#a').html(i++);
}, 1000);
},
stop: function () {
window.clearInterval(this.graph);
}
};
$('#bt1').click(function(){
Graph.start(1);
});
$('#bt2').click(function(){
Graph.stop();
});
$('#bt3').click(function(){
Graph.start(1);
});
$('#bt4').click(function(){
Graph.stop();
});
what i need is:
click in a button and make the blink event stop.
this is how i'm trying to do:
var blink = function(){
$('#blinker').toggle();
};
setInterval(blink, 800);
$("#stopBlink").click(function(){
clearInterval(blink);
});
and dos not work, what i'm missing ?
Working example
Thanks!
All you need to do is:
blink_flag = setInterval(blink, 800);
$("#stopBlink").click(function(){
clearInterval(blink_flag);
});
I'd recommend adding:
$('#blinker').show();
After the clearInterval.
You're trying to use clearInterval on the function. That won't work because clearInterval takes the interval's unique ID as a parameter. This parameter would be returned by the setInterval function. If you store the unique ID in a variable and pass that to clearInterval, it'll work fine. Try this:
var blink = function(){
$('#blinker').toggle();
};
var blinkID = setInterval(blink, 800);
$("#stopBlink").click(function(){
clearInterval(blinkID);
});
MDN
Demo
I think you are using clearInterval() in a wrong way. The parameter for the clearInterval() is an ID created by setInterval() and you are putting the function used by setInterval().
var blink = function(){
$('#blinker').toggle();
};
var glbTimer = setInterval(blink, 800); //declare an ID created by `setInterval()`
$("#stopBlink").click(function(){
clearInterval(glbTimer); //clear the interval of the ID.
});
Check this link for more info.
Maybe you can try with this demo.
You are trying to stop the blink toggle function, while you actually should save the interval in a variable and call clearInterval on that variable, as clearInterval expects an instance of the setInterval object as parameter: https://developer.mozilla.org/en/DOM/window.clearTimeout
http://jsfiddle.net/HTRZk/22/:
var blink = setInterval(function(){
$('#blinker').toggle()}
, 800);
$("#stopBlink").click(function(){
clearInterval(blink);
});
Also, you will need to make sure that when the blinking event is being stopped while the text is hidden you show the item again. Within the .click event add:
$('#blinker').show();
var blink = function(){
$('#blinker').toggle();
};
var bl = setInterval(blink, 800);
$("#stopBlink").click(function(){
clearInterval(bl);
});
i have code
function smena(){
$('.wrapper').animate({opacity:0},2500,function(){
setTimeout ($('.wrapper').animate({opacity:1},2500),5000)
});
}
$(document).ready(function(){
setInterval('smena();',10000);
});
why me animaation jump? i want just change bg for my div "wrapper".
Basically you're not passing the functions around correctly for setTimeout. You're actually passing the result of "$('.wrapper').animate({opacity:1},2500)" to the setTimeout, not the action itself. This is probably what you want:
function smena(){
$('.wrapper').animate({opacity:0},2500,function(){
setTimeout (function() {
$('.wrapper').animate({opacity:1},2500)
},5000)
});
}
$(document).ready(function() {
setInterval(smena, 10000);
});