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);
});
Related
I would like pause on hover when the mouse hovers over the fadelinks div for this script:
$(function(){
$('.fadelinks > :gt(0)').hide();
setInterval(function(){$('.fadelinks > :first-child').fadeOut().next().fadeIn().end().appendTo
('.fadelinks');}, 5000);
});
The html is along the lines of:
<div class="fadelinks">
<div>...</div>
<div>...</div>
</div>
I've tried a few things relating to interval to try and cram pause on hover functionality in there, but with my extremely limited jquery knowledge, everything I've tried breaks the script, leaving it stuck on the last slide or the first slide. Would just like this simple script to pause on mouse-hover and start up again on mouse-exit.
Here's a JSFiddle of the script in its natural state.
Try using .hover() , declaring variable to reference setInterval , using a function to call setInterval
$(function(){
// define `_interval` variable
var _interval;
// cache `.fadelinks` element
var elem = $(".fadelinks");
elem.find("> :gt(0)").hide();
elem.hover(function() {
// "pause" at `hover` of `.fadelinks`
clearInterval(_interval)
}, function() {
// "reset"
interval()
});
var interval = function() {
_interval = setInterval(function(){
elem.find("> :first-child")
.fadeOut().next().fadeIn().end()
.appendTo(elem);
}, 2000)
};
interval()
});
jsfiddle https://jsfiddle.net/ccmgdfog/4/
In your case, there wasn't the need for jQuery. Only with stopInterval you can control it. Altrough there is the jQuery $.stop() function, we wouldn't get the desired result.
I've changed a bit your code:
$(function(){
$('.fadelinks > :gt(0)').hide();
var interval = setInterval(intervalFunc, 2000);
$('.fadelinks').on('mouseenter',function(){
clearInterval(interval);
});
$('.fadelinks').on('mouseout',function(){
interval = setInterval(intervalFunc, 2000);
});
function intervalFunc(){
$('.fadelinks > :first-child').fadeOut().next().fadeIn().end().appendTo('.fadelinks');
}
});
Ok perhaps someone could enlighten me as to what I am missing here guys. I have a text box which updates a jquery data table with ajax call based on user input. Obviously the desire is to only fire the ajax call when the user has finished typing.
However no matter what snippets I try from SO and elsewhere the timeout is ignored and the ajax fire immediately. I wonder if anyone might point me in the right direction.
var timer;
$("#search_query").on('keyup', function() {
clearInterval(timer); //clear any interval on key up
timer = setTimeout(alert("test"), 3000);
});
You have to pass a function to the timeout function as the first parameter. Now you're passing the result of the alert("test") call.
var timer;
$("#search_query").on('keyup', function() {
clearInterval(timer); //clear any interval on key up
timer = setTimeout(function(){ alert("test"); }, 3000);
});
This should work.
try this setTimeout( 'you need to pass function here', 300 )
var timer;
$("#search_query").on('keyup', function() {
clearInterval(timer); //clear any interval on key up
timer = setTimeout(hello, 3000);
});
function hello(){
alert("test");
}
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);.
I am trying to use SetInterval and clearInterval in YUI
The code is written so it will create element every second and on mouse hover of div it should stop creating element.
http://jsbin.com/awadek/5
Please let me know what is wrong with my code?
You should pass an anonymous function as a handler to "mouseover". Otherwise, Javascript will attempt to evaluate and call the return from clearInterval (in this case, an integer!). The following code will work:
YUI().use("console", "console-filters", "substitute", "node-event-simulate",
function(Y) {
console.log("YUI is ready");
var doSomething = function(e) {
Y.one("#seconds").append("<p>I am number four</p>");
};
IntervalId = setInterval(doSomething, 1000);
//Notice the anonymous function below:
Y.one("#clearInt").on('mouseover', function() { clearInterval( IntervalId ) });
});
Here is your JSBin, ftfy. Enjoy!
I have a great bookmarklet that reloads the css for the projects I'm working on. Right now I need to click the bookmark every time I want it to reload. What I want it to do is just set an interval.
This is it:
javascript:void(function(){var i,a,s;a=document.getElementsByTagName('link');for(i=0;i<a.length;i++){s=a[i];if(s.rel.toLowerCase().indexOf('stylesheet')>=0&&s.href) {var h=s.href.replace(/(&|%5C?)forceReload=\d+/,'');s.href=h+(h.indexOf('?')>=0?'&':'?')+'forceReload='+(new Date().valueOf())}}})();
This is what I tried:
javascript:void(
setInterval(
function(){
var i,a,s;
a=document.getElementsByTagName('link');
for(i=0;i<a.length;i++){
s=a[i];
if(s.rel.toLowerCase().indexOf('stylesheet')>=0&&s.href) {
var h=s.href.replace(/(&|%5C?)forceReload=\d+/,'');
s.href=h+(h.indexOf('?')>=0?'&':'?')+'forceReload='+(new Date().valueOf())
}
}
}, 500
);
)();
Any ideas? I've never worked with bookmarklets.
Thanks!
I'd try to name the function then pass it to setInterval:
javascript: myfun = function() {...}; setInterval(myfun, 500);