countTo.js restart on complete with a short pause - javascript

im using the countTo.js script to display a counter. This counter has to count up to a specific value and then restart after a short delay. Everything works fine except the delay after its finished. Problem is, it restarts immediately. Cant get it to work, maybe you got some ideas?
script and documentation on github: countTo.js
$(document).ready(function() {
jQuery('.timer1').countTo({
onComplete: function() {
jQuery('.timer1').countTo('restart')
}
});
});
JSFiddle

You can use setTimeout like this:
$(document).ready(function() {
jQuery('.timer1').countTo({
onComplete: function() {
setTimeout(function(){
jQuery('.timer1').countTo('restart');
}, 1000);
}
});
});
Here 1000 is the wait in milliseconds.

Related

How to stop a delay if attribute is clicked

Testing this out and I'm trying to figure out how to stop a delay if i click another attribute. I'll post the site address to make this explanation a lot better, but basically when you press menu my nav appears with a delay, when I press Assignment 6 I want everything else to hide, which it does, but I see that because I have a delay when it hides and it's not done delaying it will continue to print out the rest of the elements even though they are supposed to be hidden. Also a disclaimer, I've gotten a lot of heat on this site before because I think people think I expect an answer. This is not the case, I love to learn and although the answer would be helpful and I would be able to de-engineer it and learn it, I would much rather have some guidance. So yeah, I'm not just looking for an answer if anyone thinks that's what I'm on here for (I come on here when I can't figure it out any other way).
site
my jQuery script:
$(document).ready(function () {
//$('ul').hide();
$('ul li').hide();
$('nav>li').hide();
$('nav>h1>').click(function (event) {
event.preventDefault();
$('nav>ul li:hidden').each(function(i) {
$('nav>li').show();
$('nav>h1').hide();
$(this).delay(i*600).fadeIn(200);
});
$('nav>ul li:visible').each(function(i) {
$('nav>h1').hide();
$(this).delay(i*600).fadeOut(200);
});
return false;
}); //closes a.btnDown
$('nav>li').click(function (event) {
$('nav>h1').show();
$('nav>li').hide();
$('ul li').hide();
return false;
}); //closes a.btnDown
}); //closes .ready
setTimeout is a useful mechanism to solve what you are after. It waits for (at least) the delay specified, and executes the callback function.
var elements = $('nav>ul li:hidden');
var timeoutId;
function doAnimation(index) {
timeoutId = window.setTimeout(function () {
if (index < elements.length) {
$(elements[index]).fadeIn(200);
doAnimation(++index);
}
}, 600);
}
The clue is to declare the timeoutId outside a recursive function, and assign it within the function. By doing it in a recursive fashion, you don't start the next timeout before the current timeout is finished, and it can be aborted at any time.
window.clearTimeout(timeoutId);
I've made a little fiddle that demonstrates the concept, but I haven't implemented a complete solution. Hope this helps you get further with your project.
http://jsfiddle.net/pyMpj/
You can replace your delays with setTimeout and clear them with clearTimeout
$('nav>ul li:hidden').each(function(i) {
$('nav>li').show();
$('nav>h1').hide();
var fadeTimeout = setTimeout(function () {
$(this).fadeIn(200);
}, i * 600);
});
$('nav>li').click(function (event) {
$('nav>h1').show();
$('nav>li').hide();
$('ul li').hide();
clearTimeout(fadeTimeout);
return false;
});

How to add .delay to .click on .each iteration (jquery)

So, I want to put delay on this JavaScript code.
$(function(){
$('.clickThis').each(function(){
$(this).click();
});
});
I tried this
$(function(){
$('.clickThis').each(function(){
$(this).click().delay(5000);
});
});
above script doesnt work .
Is there any alternative?
I've tried Google it but I still couldn't figure it out, because I have little knowledge in JavaScript.
This will do it:
$(function(){
$('.clickThis').each(function(i, that){
setTimeout(function(){
$(that).click();
}, 5000*i );
});
});
Here's a version using a recursive setTimeout loop.
$(function() {
var click = $('.clickThis').toArray();
(function next() {
$(click.shift()).click(); // take (and click) the first entry
if (click.length) { // and if there's more, do it again (later)
setTimeout(next, 5000);
}
})();
});
The advantage of this pattern over setTimeout(..., 5000 * i) or a setInterval call is that only a single timer event is ever queued at once.
In general, repeated calls to setTimeout are better than a single call to setInterval for a few reasons:
setInterval calls can queue up multiple events even if the browser isn't active, which then all fire as quickly as possibly when the browser becomes active again. Calling setTimeout recursively guarantees that the minimum time interval between events is honoured.
With setInterval you have to remember the timer handle so you can clear it
You need to write an asynchronous setTimeout loop, for more information http://www.erichynds.com/javascript/a-recursive-settimeout-pattern/
Try to use this:
$(function () {
var items=$('.clickThis');
var length=items.length;
var i=0;
var clickInterval=setInterval(function(){
items.eq(i).click();
i++;
if(i==length)
clearInterval(clickInterval);
}, 5000);
});
var $clickthis=$(".clickthis");
var i= -1;
var delayed = setInterval(function(){
if (++i < $clickthis.length) $clickthis.eq(i).trigger("click");
else clearInterval(delayed);
}, 5000);
I am not sure but I think that setTimeout function should do the trick.
See here https://developer.mozilla.org/en-US/docs/DOM/window.setTimeout
Try
$(function(){
$('.clickThis').each(function(_,i){
var me=$(this);
setTimeout(function(){me.click()},5000*i);
);
});

How can I run jQuery load() request each n seconds?

I have following code
$('document').ready(function() {
reload();
});
function reload() {
$('div#info').load('http://somesite.ru/script.php');
setInterval(reload(), 10000);
}
but seems like method reload() runs too fast. Firefox shows me message, about jquery.min.js is sems to busy. How can I make part of page refresh one time for each 10 seconds?
You should remove the (), also put the setInterval function outside the context of the reload function.
function reload() {
$('#info').load('http://somesite.ru/script.php');
}
$(document).ready(function() {
setInterval(reload, 10000);
});
Replace:
setInterval(reload(), 10000);
with:
setInterval(reload, 10000);
Use setTimeout() instead it is safe and performance wise good than the setInterval() to fulfill your requirement.
var time= setTimeout(reload,1000);
after checking certain conditions in the reload() method call the setTimeout inside it again
function reload()
{
/// your logic
setTimeout(reload,1000);
}
use the above variable to destroy the interval whenever you don't want to reload anymore
clearTimout(time);
Refer: http://www.w3schools.com/js/tryit.asp?filename=tryjs_setinterval
setInterval(function(){reload();},10000);
Another way is just use
$('document').ready(function() {
setInterval(function() {
$('div#info').load('http://somesite.ru/script.php');
}, 10000);
});
All works fine. Thanks a lot for your answers.

How can I use jQuery to animate graphic loading?

Whats wrong in here?
$(document).ready(function(){
$(window).load(function(){$("#welcome").fadeIn(2000); })
setTimeout(function(){
$('div#welcome').fadeOut(2000);
}, 4000);
setTimeout(function(){
$('div#content').fadeIn(2000);
}, 6000);
setTimeout(function(){
$('div#menu').fadeIn(2000);
}, 8000);
});
It seems like something is not running as it should, as all functions will be called parallel.
In addition people tell me that my graphic will be loaded with a delay and will 'stick'.
I appreciate any help!
So, syntax-wise, there isn't a semi-colon at the end of the window.load event setter. You should add that.
However, I just ran your JS with a mock HTML set, and it worked fine. Not sure what you are experiencing. All three of the setTimeout calls will begin to run at the same time. So... rather than taking 18 seconds to run, they will all only take 8 seconds to run. It looks like that is what you wanted.
Here is the most efficient wait to write your code though:
$(document).ready(function(){
$(window).load(function(){
$("#welcome").fadeIn(2000).delay(2000).fadeOut(2000,function(){
$('div#content').fadeIn(2000,function(){
$('div#menu').fadeIn(2000);
});
});
});
});
Here, what will happen is that each of your animations will trigger the next animation, when they are complete.
I think you are looking for something like this.
$(document).ready(function(){
$("#welcome").fadeIn(2000, function(){
setTimeout(function(){
$('div#welcome').fadeOut(2000, function(){
setTimeout(function(){
$('div#content').fadeIn(2000, function(){
setTimeout(function(){
$('div#menu').fadeIn(2000);
}, 8000);
});
}, 6000);
});
}, 4000);
});
});
If you want to do something after something is finished you need to add another function after you set your parameter (2000 in this case).
I believe that you want to do something like this http://jsfiddle.net/Cp4Dx/
OP don't forget about Jquery's delay() function which can help you avoid setTimeout().
$(window).load(function(){$("#welcome").fadeIn(2000).delay(4000).fadeOut(2000)});
You can use the jQuery queue for it:
$(document).ready(function() {
$('#welcome').fadeIn(2000).delay(2000).fadeOut(2000);
$('#content').delay(4000).fadeIn(2000);
$('#menu').delay(6000).fadeIn(2000);
});
Demo: http://jsfiddle.net/ThiefMaster/9nPAR/

Call js-function using JQuery timer

Is there anyway to implement a timer for JQuery, eg. every 10 seconds it needs to call a js function.
I tried the following
window.setTimeout(function() {
alert('test');
}, 10000);
but this only executes once and then never again.
You can use this:
window.setInterval(yourfunction, 10000);
function yourfunction() { alert('test'); }
window.setInterval(function() {
alert('test');
}, 10000);
window.setInterval
Calls a function repeatedly, with a
fixed time delay between each call to
that function.
Might want to check out jQuery Timer to manage one or multiple timers.
http://code.google.com/p/jquery-timer/
var timer = $.timer(yourfunction, 10000);
function yourfunction() { alert('test'); }
Then you can control it with:
timer.play();
timer.pause();
timer.toggle();
timer.once();
etc...
setInterval is the function you want. That repeats every x miliseconds.
window.setInterval(function() {
alert('test');
}, 10000);
jQuery 1.4 also includes a .delay( duration, [ queueName ] ) method if you only need it to trigger once and have already started using that version.
$('#foo').slideUp(300).delay(800).fadeIn(400);
http://api.jquery.com/delay/
Ooops....my mistake you were looking for an event to continue triggering. I'll leave this here, someone may find it helpful.
try jQueryTimers, they have great functionality for polling
http://plugins.jquery.com/project/timers
You can use setInterval() method also you can call your setTimeout()
from your custom function for example
function everyTenSec(){
console.log("done");
setTimeout(everyTenSec,10000);
}
everyTenSec();
function run() {
window.setTimeout(
"run()",
1000
);
}

Categories

Resources