I am currently building a website to host software. What I want is to add to the project pages is a slideshow of screenshots cycling, changing images about every 5 seconds. Is there any way to a script triggered at a time interval using just JavaScript? ..or will I have to resort to alternative methods for achieving my desired functionality.
Thanks in advance for any help!
setInterval:
function doSomething() {
alert('This pops up every 5 seconds and is annoying!');
}
setInterval(doSomething, 5000); // Time in milliseconds
Pass it the function you want called repeatedly every n milliseconds. (setTimeout, by the way, will call a function with a timeout.)
If you ever want to stop the timer, hold onto setInterval’s return value and pass it to clearInterval.
You want the setInterval function.
setInterval(function() {
// This will be executed every 5 seconds
}, 5000); // 5000 milliseconds
Basic reference: http://www.w3schools.com/jsref/met_win_setinterval.asp (please ignore the reference to the "lang" parameter)
More indepth reference: https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
You can use window.setInterval
Sample usage:
window.setInterval(function () {
console.log("foo");
}, 3000);
It Changes the date time in a div and time changes frequently after 1 sec.
setInterval(function(){
var date=new Date();
$('.class').html(date);
},1000);
Related
I am making a timer in javascript. But there is one thing I am not getting.
Here's the code...
var time = 0;
var timeInterval;
var testTime;
//Main code which increases the value of variable time by 1 every second until interval is stopped
timeInterval = setInterval(function (){
time++;
testTime = time;
}, 1000);
//Code to stop the interval after 10 seconds.
setTimeOut(function() {
clearInterval(timeInterval);
},10000);
//Expected value -> 10
//I get -> 0
console.log(testTime)
If I am running a function which increases the value of time by 1 10times by setInterval() method... Why the value of time is not updating?
When you call setInterval, you are asking code to run after a certain amount of time. The setInterval function is an example of a function that takes a function as a parameter.
This means that you're declaring a function and asking setInterval to call it at a later time all in one go. None of what is inside the function will be called until the interval happens.
Your console.log is not inside either of the functions you gave to setInterval or setTimeout, so it will run straight away.
The order of execution is:
Your variables are declared
Your call to ask setInterval to run your function periodically
Your call to ask setTimeout to run your function after 10 seconds
Your console.log is made
At this point, the execution on your main thread ends
The function you gave to setInterval is called a bunch of times
The function you gave to setTimeout is called once
If you want to fix your code, you can put the console.log in the setTimeout function to ask it to run at the end of the 10 seconds (putting it inside step 7).
var time = 0;
// Main code which increases the value of variable time by 1 every second until interval is stopped
var timeInterval = setInterval(function (){
time++;
console.log("time during interval: ", time);
}, 1000);
// Code to stop the interval after 10 seconds.
setTimeout(function() {
clearInterval(timeInterval);
console.log("time at end: ", time);
}, 10000);
Depending on your objective, you might rather simplify your code by calling clearInterval inside your interval function (if(time > 10) clearInterval(...)) to reduce the likelihood of a bug.
My fiddle link is as follows:http://jsfiddle.net/FvYyS/2/
The function call is as follows:
load_timer('0', '6', '9', 0, '0', '', '0');
Actually my issue is the fiddle is not working. The expected behaviour of this code is the timer should decrease second by second and ultimately reaches to zero(i.e. for example the timer should start at 00:06:09 and end at 00:00:00). But it's not working here in the fiddle. The code is working properly in my application but don't know why this code is not working in fiddle. Also one more issue I noticed in my application is the timer is lagging sometime behind. Can anyone please help me in this regard? If you need any further information I'll provide you the same. Thanks in advance.
Your code has the following structure :
var counter = delay;
function loop() {
counter--;
displayTime(delay, counter);
if (counter > 0) {
setTimeout( loop, 1000 );
}
}
2 things :
displayTime() execution takes time : for example, if it takes 0.2 seconds to complete, the loop will be executed every 1.2 seconds (instead of every second)
setTimeout( ..., 1000 ) means "Please dear javascript runtime, can you run my code in 1 second ? If you have other stuff to do, it is ok for me to wait more."
You have the guarantee that there will be at least 1 second between the setTimeout call and your loop excution, but the delay can be longer.
If you want to avoid the time drift, check for the real time on each iteration :
var start = Date.now();
function loop() {
var now = Date.now();
var elapsedTime = now - start; //elapsed time in milliseconds
displayTime(delay, elapsedTime);
if (elapsedTime < delay) {
setTimeout(loop, 1000);
}
}
you have not included the jquery library in your fiddle
See UPDATED FIDDLE
There are several problems with your approach:
Since you do the setTimeout after doing some work, the time it takes for your work to be done will delay the next iterations. You could fix this by moving the setTimeout call to be the first executed and then do the work.
Using setTimeout(f, timeout) guarantees that the f function will be executed at least timeout miliseconds after the setTimeout call. So if for example the browser is busy for 1 second when the call to f should be executed, the call to f is delayed by 1 second. Furthermore, the next call to setTimeout is delayed by that second, so everything coming after that will incur your delay.
A better fix would be to use setInterval which is designed with repeating a task every n miliseconds and alleviates the recurrent delay problem.
Finally, the best solution to the problem is to use Date to determine the start of your counter and show the exact time elapsed by substracting the original time from the current time.
I need to be able to call this function to reset the interval.
I know this has been asked before. But the answer given at
Javascript - Reset setInterval back to 0
is not working for me.
Here is the code that I tried:
function startTimer(){
clearInterval(interval);
var interval = setInterval(function(){
advanceSlide();
}, 5000);
};
I call that at the beginning of my page to start a slideshow that changes every 5 seconds. and I use this code to call it again, witch I expected would reset that 5 seconds.
onclick=startTimer();>
The onclick does one other thing too, but this is what is not working. The other action takes place but the interval does not change, its still going based off the same portion of 5 seconds that was left before I clicked.
You need to declare the variable outside the function...
var interval;
function startTimer() {
clearInterval(interval);
interval = setInterval(advanceSlide, 5000);
}
Otherwise it is lost when the function exits.
I am working on a module in which there is a requirement to show a timer which shows only seconds. The timer must start from 30 and keep on decrementing down to 0; and after that fire some action and again start from 30. How can I achieve this in javascript?
There you go :)
var timer = 30;
function decrementAfter1Second(){
setTimeout(function(){
timer--;
if(timer==0){
doWhateverYouWantAfter30Seconds();
timer = 30;
}
decrementAfter1Second();
}, 1000);
}
decrementAfter1Second();
Now next time you want to do something in javascript don't be a slacker and read something about the language first ;) because right now i'm assuming you either don't know how to program or you don't know how to use google.
You could use setTimeout and clearTimeout. Have the timeout fire every 1 second and then invoke clearTimeout when seconds == 0.
You can find examples of both functions here.
UPDATE 2:
OK, looks like it runs the first time after a minute. How do I get it to run onload, then every minute after that?
UPDATE 1:
I've tried: var interval = setInterval(get_reported_incidents, 60000); but nothing happens. in get_reported_incidents(); I just have an alert("hello");.
ORIGINAL QUESTION:
I want to run a function every minute:
get_reported_incidents();
But I am not sure which method is best for this task;
settimeout or setinterval
It's totally personal preference. setInterval has some odd edge cases around what happens when the previous interval's code hasn't finished running before the next interval is due to start (not a problem if your interval is every minute; intervals every second, which one sometimes wants, get a bit tricky).
I tend to prefer chained setTimeout calls (where each schedules the next) because they can't run away with you — your code always has to explicitly say "Okay, and call me back again next time." But properly-written code should work with either.
Chained setTimeout calls are also more well-suited to asynchronous operations, like for instance polling something via ajax, because you don't schedule the next timeout until the ajax operation completes. Using setInterval, because the ajax calls are asynchronous, you could end up overlapping them.
Using setinterval would be the more natural choise. If you use setTimeout, you have to start a new timeout from the event handler.
window.setInterval(get_reported_incidents, 60*1000);
setTimeout runs a command once after a period of time. setInterval runs a command every time interval.
So, to run get_reported_incidents every minute use setInterval.
var interval = setInterval(get_reported_incidents, 60000);
setinterval executes a function at a given interval. settimeout executes a function after a specified wait time, and then exits.
If you are attempting to do a cron-like execution every minute, you will want to use setinterval.
Please see http://javascript.about.com/library/blstvsi.htm for a comparison.
use setTimeout recursively. See here for more information on why setInterval is a poor choice.
function timeout (){
get_reported_incidents();
setTimeout(timeout, 1000 * 60);
}
timeout(); // start
Strictly speaking, setInterval() was designed for repeating events and setTimeout() for one-shot events.
However you will tend to find that with setTimeout() time will "creep" gradually. I've not tried this at 1 minute intervals, but with a 1 second timer I found it happened quite a lot. A clock showing the current time (to the nearest millisecond) would show a steady increase in the millisecond value of "now".
See http://jsfiddle.net/alnitak/LJCJU/ and tweak the interval to see what I mean!
So, for greatest accuracy, I do this:
var timerHandler = function() {
var interval = 60000;
// do some stuff
...
var now = new Date();
var delay = interval - (now % interval);
setTimeout(timerHandler, delay);
};
This is ideal if you want the timer events to be started in sync with the clock on your system, rather than at some unspecified time "roughly every minute".
obviously setinterval might be easier to maintain in your case
get_reported_incidents(); //first call
var interval = setInterval(get_reported_incidents, 60000);
vs
var interval;
function timeout (){
get_reported_incidents();
interval=setTimeout(timeout, 60000);
}
timeout();