In this article, the following function is given to perform an operation x times with setInterval()
setIntervalX(function () {
animateColor();
//or something
}, 3000, 4);
function setIntervalX(callback, delay, repetitions) {
var x = 0;
var intervalID = window.setInterval(function () {
callback();
if (++x === repetitions) {
window.clearInterval(intervalID);
}
}, delay);
}
what does the callback() do here? I'm trying to do a function after the specified number of repetitions is complete. but this
setIntervalX(function () {
animateColor();
}, 3000, 4, function(){
completeFunction();
});
does not work. Perhaps that syntax is very wrong. I was under the impression that using jquery, you could string together functions like that..
Much grateful for any insight. Thanks!
I think you misunderstood the description slightly. The setIntervalX performs an interaction x times while you want to have a callback function AFTER the iteration.
function setIntervalX(interationFunction, delay, repetitions, callbackFunction) {
var x = 0;
var intervalID = window.setInterval(function () {
iterationFunction();
if (++x === repetitions) {
callbackFunction();
window.clearInterval(intervalID);
}
}, delay);
}
setIntervalX(
function() {
// this executed every time the interval triggers
},
1000, // amount of milliseconds to delay before interval triggers
5, // amount of repetitions before interval is stopped and callback is executed
function() {
// this will be executed after the interval triggered 5 times
// so after round about 5 seconds after setIntervalX was started
}
);
function setIntervalX(func, delay, times, callback) {
if (times > 0) {
setTimeout(function() {
func.apply(arguments.callee);
setIntervalX(func, delay, --times, callback);
}, delay);
} else {
callback.apply(this);
}
}
setIntervalX(function() {
document.write('ping!<br />');
}, 1000, 5, function() {
document.write('Finished!<br />');
});
I personally prefer the setTimeout method... but that is just me. give this a shot and see if it works. demo
Ahh it appears I have misread you're entire post... so Tobias is correct in his reasoning for your question. mine is an example of what you want.
Wow, much simpler with Frame.js:
for(var i=0; i<4; i++){
Frame(3000, animateColor);
}
Frame(completeFunction);
Frame.start();
Both functions would need to call a callback which is passed to them as the first argument:
function animateColor(callback){
// do stuff
callback(); // to advance to the next interval
}
function completeFunction(callback){
// do stuff
callback(); // to advance to conclude the series of Frames
}
callback in the original function is ran on every interval up to X times. Try this modification to allow for a complete callback:
setIntervalX(function () {
animateColor();
//or something
}, 3000, 4, function(){
alert("all done!");
});
function setIntervalX(callback, delay, repetitions, complete) {
var x = 0;
var intervalID = window.setInterval(function () {
callback();
if (++x === repetitions) {
window.clearInterval(intervalID);
complete();
}
}, delay);
}
Related
Using setTimeout() it is possible to launch a function at a specified time:
setTimeout(function, 60000);
But what if I would like to launch the function multiple times? Every time a time interval passes, I would like to execute the function (every 60 seconds, let's say).
If you don't care if the code within the timer may take longer than your interval, use setInterval():
setInterval(function, delay)
That fires the function passed in as first parameter over and over.
A better approach is, to use setTimeout along with a self-executing anonymous function:
(function(){
// do some stuff
setTimeout(arguments.callee, 60000);
})();
that guarantees, that the next call is not made before your code was executed. I used arguments.callee in this example as function reference. It's a better way to give the function a name and call that within setTimeout because arguments.callee is deprecated in ecmascript 5.
use the
setInterval(function, 60000);
EDIT : (In case if you want to stop the clock after it is started)
Script section
<script>
var int=self.setInterval(function, 60000);
</script>
and HTML Code
<!-- Stop Button -->
Stop
A better use of jAndy's answer to implement a polling function that polls every interval seconds, and ends after timeout seconds.
function pollFunc(fn, timeout, interval) {
var startTime = (new Date()).getTime();
interval = interval || 1000;
(function p() {
fn();
if (((new Date).getTime() - startTime ) <= timeout) {
setTimeout(p, interval);
}
})();
}
pollFunc(sendHeartBeat, 60000, 1000);
UPDATE
As per the comment, updating it for the ability of the passed function to stop the polling:
function pollFunc(fn, timeout, interval) {
var startTime = (new Date()).getTime();
interval = interval || 1000,
canPoll = true;
(function p() {
canPoll = ((new Date).getTime() - startTime ) <= timeout;
if (!fn() && canPoll) { // ensures the function exucutes
setTimeout(p, interval);
}
})();
}
pollFunc(sendHeartBeat, 60000, 1000);
function sendHeartBeat(params) {
...
...
if (receivedData) {
// no need to execute further
return true; // or false, change the IIFE inside condition accordingly.
}
}
In jQuery you can do like this.
function random_no(){
var ran=Math.random();
jQuery('#random_no_container').html(ran);
}
window.setInterval(function(){
/// call your function here
random_no();
}, 6000); // Change Interval here to test. For eg: 5000 for 5 sec
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="random_no_container">
Hello. Here you can see random numbers after every 6 sec
</div>
setInterval(fn,time)
is the method you're after.
You can simply call setTimeout at the end of the function. This will add it again to the event queue. You can use any kind of logic to vary the delay values. For example,
function multiStep() {
// do some work here
blah_blah_whatever();
var newtime = 60000;
if (!requestStop) {
setTimeout(multiStep, newtime);
}
}
Use window.setInterval(func, time).
A good example where to subscribe a setInterval(), and use a clearInterval() to stop the forever loop:
function myTimer() {
}
var timer = setInterval(myTimer, 5000);
call this line to stop the loop:
clearInterval(timer);
Call a Javascript function every 2 second continuously for 10 second.
var intervalPromise;
$scope.startTimer = function(fn, delay, timeoutTime) {
intervalPromise = $interval(function() {
fn();
var currentTime = new Date().getTime() - $scope.startTime;
if (currentTime > timeoutTime){
$interval.cancel(intervalPromise);
}
}, delay);
};
$scope.startTimer(hello, 2000, 10000);
hello(){
console.log("hello");
}
function random(number) {
return Math.floor(Math.random() * (number+1));
}
setInterval(() => {
const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';//rgb value (0-255,0-255,0-255)
document.body.style.backgroundColor = rndCol;
}, 1000);
<script src="test.js"></script>
it changes background color in every 1 second (written as 1000 in JS)
// example:
// checkEach(1000, () => {
// if(!canIDoWorkNow()) {
// return true // try again after 1 second
// }
//
// doWork()
// })
export function checkEach(milliseconds, fn) {
const timer = setInterval(
() => {
try {
const retry = fn()
if (retry !== true) {
clearInterval(timer)
}
} catch (e) {
clearInterval(timer)
throw e
}
},
milliseconds
)
}
here we console natural number 0 to ......n (next number print in console every 60 sec.) , using setInterval()
var count = 0;
function abc(){
count ++;
console.log(count);
}
setInterval(abc,60*1000);
I see that it wasn't mentioned here if you need to pass a parameter to your function on repeat setTimeout(myFunc(myVal), 60000); will cause an error of calling function before the previous call is completed.
Therefore, you can pass the parameter like
setTimeout(function () {
myFunc(myVal);
}, 60000)
For more detailed information you can see the JavaScript garden.
Hope it helps somebody.
I favour calling a function that contains a loop function that calls a setTimeout on itself at regular intervals.
function timer(interval = 1000) {
function loop(count = 1) {
console.log(count);
setTimeout(loop, interval, ++count);
}
loop();
}
timer();
There are 2 ways to call-
setInterval(function (){ functionName();}, 60000);
setInterval(functionName, 60000);
above function will call on every 60 seconds.
Here is my code
(function() {
(function DeleteREG(i) {
setTimeout(function() {
if (i > 0) {
setTimeout(function stop_() {
alert(i);
}, 2000);
setTimeout(function() {
i--;
DeleteREG(i);
}, 800);
}
}, 4000);
})(5);
})();
According to the code it should alert at i=5,4,3,2,1.But it alerts at i=4,3,2,1,0.Can anyone please explain me why it is not working?what should be rectified to the code to work properly?Same thing happens for the following code also
(function() {
(function DeleteREG(i) {
setTimeout(function() {
if (i > 0) {
setTimeout(function stop_() {
alert(i);
}, 2000);
i--;
DeleteREG(i);
}
}, 4000);
})(5);
})();
And please explain me the solution in written format.How to get rid of this problem?
When you call setTimeout, your code doesn't stop.
Those two functions defined here :
setTimeout(function stop_() {
alert(i);
}, 2000);
setTimeout(function() {
i--;
DeleteREG(i);
}, 800);
They're called 2000 and 800 ms after the same moment. That's why i-- comes before the alert of the first callback.
A "solution" might be to chain the first of those callback in the second one :
(function() {
(function DeleteREG(i) {
setTimeout(function() {
if (i > 0) {
setTimeout(function stop_() {
console.log(i);
setTimeout(function() {
i--;
DeleteREG(i);
}, 80);
}, 200);
}
}, 400);
})(5);
})();
the functions that are passed to the 2 setTimeouts are created in the same execution scope ( an execution scope is created when a function is executed ) that's why they share the same i variable. The second callback will be fired before the first, therefore altering the i variable.
setTimeout pushes a message into a message queue after x milliseconds have passed, x being the time you passed as the second parameter. Anyway, the callback passed to setTimeout will always run after the current stack has been finished. This happens even if you pass 0 milliseconds ( read more details here).
UPDATE: I'm not sure what are you trying to achieve, but if you want to count from 5 to 1, this would do:
var delay = 1000;
function doStuff (i) {
if ( i > 0 ) {
alert(i);
i -= 1;
setTimeout(function () {
doStuff(i);
}, delay);
}
}
doStuff(5);
Check Out if you're not using throttling options on chrome. It can simulate a slow device, changing timing for intervals.
I need this code to iterate for about 10 seconds (or better indefinitely) without causing javascript maximum stack size. I have comented setInterval because it's causing the problem!
var myToggle = false;
function myFunc () {
setTimeout(function () {
if (myToggle) {
console.log("red");
}
else {
console.log("yellow");
}
myToggle = !myToggle;
}, 500);
// setInterval(myFunc, 10000);
}
myFunc();
Call setInterval instead. setTimeout will call the inner function once. setInterval will continue calling until you cancel.
This usually a sign of bad design but the solution may be the following:
var myToggle = false;
function myFunc () {
var startTime = new Date()/1;
function wait () {
if (myToggle) {
console.log("red");
} else {
console.log("yellow");
}
myToggle = !myToggle;
if (new Date() < startTime + (10*1000)) { // exit condition
setTimeout(wait, 500);
}
}
wait();
}
myFunc();
FYI: Infinite callbacks, among the other things, slowdown the browser and consume battery on mobile devices.
Probably not the clearest title, but here goes - I need to display two independent countdowns on a page, accepting a user input for the starting value for each. When one reaches zero, the other starts and counts down to zero. Code for this is below, and working as expected.
I call the Timer1 function, which checks a variable for the starting value, if it exists, the count starts. When the count is zero, I clear the interval, reset the display to the starting value, and fire the second timer, if it has a value assigned:
function Timer1() {
var gDuration = goTime;
countdown = setInterval(function () {
if (gDuration >= 0) {
$("#durationValue").html(ToTime(gDuration));
gDuration--;
}
else {
clearInterval(countdown);
$("#durationValue").html(ToTime(goTime));
if (restTime != 0) {
Timer2();
}
}
}, 1000);
}
function Timer2() {
var rDuration = restTime;
countdown = setInterval(function () {
if (rDuration >= 0) {
$("#restValue").html(ToTime(rDuration));
rDuration--;
}
else {
clearInterval(countdown);
$("#restValue").html(ToTime(restTime));
}
}, 1000);
}
The next step is to allow that process to run for a set number of loops - I've tried wrapping setInterval in Timer1 in a for loop, which doesn't work. Any ideas how to better go about this?
for-loops don't work well with asynchronous stuff. Just make it a counter with an end condition as you have demonstrated with g/rDuration already.
With some callback abstractions, and heavy continuation-passing-style:
function timer(el, duration, interval, callback) {
var countdown = setInterval(function() {
if (duration-- >= 0) {
el.text(ToTime(duration));
} else {
clearInterval(countdown);
callback();
}
}, interval);
}
var goTime = …, restTime = …;
function t1(cb) {
timer($("#durationValue"), goTime, 1000, cb);
}
function t2(cb) {
timer($("#restValue"), restTimer, 1000, cb);
}
var loops = …;
(function loop(cb) {
t1(function(){
t2(function() {
if (loop-- >= 0)
loop(cb);
else
cb();
});
});
})(function() {
alert("finished!");
});
The easiest thing I can think of is to have your Timer functions have a parameter with the current iteration. Increment that value whenever one timer starts another time. And use that value to determine if it should indeed start the next timer.
I need to flash an element off and on. This works but I don't really like the code. Is there a nice way of doing this?
setTimeout(function(){
toggle();
setTimeout(function(){
toggle();
setTimeout(function(){
toggle();
setTimeout(function(){
toggle();
}, 100);
}, 100);
}, 100);
}, 100);
I'm using jQuery too if that helps.
function toggle_multiple(n)
{
var toggled = 0;
function toggle_one_time()
{
toggle();
toggled += 1;
if (toggled <= n)
setTimeout(toggle_one_time, 100);
}
toggle_one_time();
}
And just call toggle_multiple(4).
A recursive approach:
function multiTimeoutCall (callback, delay, times) {
if (times > 0){
setTimeout(function () {
callback();
multiTimeoutCall (callback, delay, times - 1);
}, delay);
}
}
Usage:
multiTimeoutCall (toggle, 100, 4);
Edit: Yet another approach, without filling the call stack:
function multiTimeoutCall (callback, delay, times) {
setTimeout(function action() { // a named function expression
callback();
if (--times > 0) {
setTimeout (action, delay); // start a new timer
}
}, delay);
}
I could used arguments.callee instead of a named function expression, but seems that it will be deprecated some day in ECMAScript 5...
Why not use setInterval?
var toggler = function() {
if (++self.counter >= self.BLINK_AMOUNT * 2) {
self.counter = 0;
window.clearInterval(self.timer);
return;
}
toggle();
};
toggler.BLINK_AMOUNT = 1;
toggler.counter = 0;
toggler.timer = window.setInterval(toggler, 100);
I can't remember whether or not IE properly implements the self variable in a timer callback - if it doesn't, use a uniquely named global variable instead.
I would use a blinking effect. For jquery there's pulsate, hope that works for you.
Here's yet another version for simplicity:
for (var i= 0; i<4; i++)
setTimeout(toggle, (i+1)*100);
For larger numbers an interval may be more appropriate, but if it's just four toggles multiple timeouts are fine.
Generalizing 'unknown's' idea of using setInterval,
function schedule(fn, max, delay)
{
var counter = 0;
var interval = setInterval(
function()
{
if(counter++ === max)
clearInterval(interval);
fn();
}
, delay);
}
Usage:
schedule(toggle, 4, 100);
If its just flashing that is required, why not use the jQuery animate ? I use the following to direct user attention to messages. But you can do this for any element -
$("#message_box").fadeOut(450).fadeIn(350);
If you want it multiple times, do this -
$("#message_box").fadeOut(450).fadeIn(350).fadeOut(450).fadeIn(350);
You can do like this:
function toggleMany(cnt) {
toggle();
if (--cnt >= 0) window.setTimeout('toggleMany('+cnt+')', 100);
}
toggleMany(4);