javascript Call function 10 times with 1 second between - javascript

How to call a function 10 times like
for(x=0; x<10; x++) callfunction();
but with 1 sec between each call?

function callNTimes(func, num, delay) {
if (!num) return;
func();
setTimeout(function() { callNTimes(func, num - 1, delay); }, delay);
}
callNTimes(callfunction, 10, 1000);
EDIT: The function basically says: make a call of the passed function, then after a bit, do it again 9 more times.

You can use setInterval for repeated execution with intervals and then clearInterval after 10 invocations:
callfunction();
var callCount = 1;
var repeater = setInterval(function () {
if (callCount < 10) {
callfunction();
callCount += 1;
} else {
clearInterval(repeater);
}
}, 1000);
Added: But if you don't know how long it takes your callfunction to execute and the accurate timings between invocation starting points are not important it seems it's better to use setTimeout for reasons mentioned by Paul S and those described in this article.

Another solution
for(var x=0; x<10; x++) window.setTimeout(callfunction, 1000 * x);

You can try to use setInterval and use a variable to count up to 10. Try this:
var number = 1;
function oneSecond () {
if(number <= 10) {
// execute code here..
number++;
}
};
Now use the setInterval:
setInterval(oneSecond, 1000);

Similar to Amadan's answer but with a different style of closure which means you re-use instead of creating new functions
function call(fn, /* ms */ every, /* int */ times) {
var repeater = function () {
fn();
if (--times) window.setTimeout(repeater, every);
};
repeater(); // start loop
}
// use it
var i = 0;
call(function () {console.log(++i);}, 1e3, 10); // 1e3 is 1 second
// 1 to 10 gets logged over 10 seconds
In this example, if you were to set times to either 0 or Infinity, it would run forever.

I don't know if there's a proper name, but I use a repeater:
function Repeater(callback, delay, count) {
var self = this;
this.timer = setTimeout(function() {self.run();},delay);
this.callback = callback;
this.delay = delay;
this.timesLeft = count;
this.lastCalled = new Date().getTime();
}
Repeater.prototype.run = function() {
var self = this;
this.timesLeft--;
this.callback();
this.lastCalled = new Date().getTime();
if( this.timesLeft > 0) {
this.timer = setTimeout(function() {self.run();},this.delay);
}
}
Repeater.prototype.changeDelay = function(newdelay) {
var self = this;
clearTimeout(this.timer);
this.timer = setTimeout(function() {self.run();},
newdelay-new Date().getTime()+lastcalled);
this.delay = newdelay;
}
Repeater.prototype.changeCount = function(newcount) {
var self = this;
if( this.timesLeft == 0) {
this.timer = setTimeout(function() {self.run();},this.delay);
}
this.timesLeft = newcount;
if( this.timesLeft == 0) clearTimeout(this.timer);
}
You can then use it like this:
new Repeater(callfunction, 1000, 10); // 1 second delay, 10 times

const functionCounterTimer = (callCount) => {
if (callCount < 10) {
setTimeout(() => {
++callCount
console.log("Function Call ", callCount);
functionCounterTimer(callCount);
}, 1000);
}
}
functionCounterTimer(0);
The above was my approach to a similar question.

setInterval(function(){},1000);
Calls the function for every second...
You can also use setTimeout for your thing to work.

Related

jQuery Countdown Each Second

I'm trying to make a jQuery countdown type animation, that once it hits 0 it executes a function. However I'm having problems because I'm unsure how to go about doing this. I thought I'd do a while loop then pause for a second until it hits 0. However it doesn't seem possible to pause a while loop. So I'm wondering what's the best way to do this? Thanks.
countdown takes an HTMLElement to display itself and the number of seconds to count down for
It returns a Promise that resolves when the counter reaches 0
We can use a .then call to apply a function when the count-down has completed
function countdown(elem, s) {
return new Promise(function(resolve) {
function loop(s) {
elem.innerHTML = s
if (s === 0)
resolve(elem)
else
setTimeout(loop, 1000, s - 1)
}
loop(s)
})
}
countdown(document.querySelector('#a'), 3).then(
function(elem) { console.log('done', elem) }
)
countdown(document.querySelector('#b'), 5).then(
function(elem) { console.log('done', elem) }
)
countdown(document.querySelector('#c'), 10).then(
function(elem) { console.log('done', elem) }
)
<p id="a"></p>
<p id="b"></p>
<p id="c"></p>
You should also be aware that setTimeout and setInterval do not guarantee that the milliseconds argument used is 100% accurate …
var last = Date.now()
var interval = setInterval(function() {
var now = Date.now()
var delta = now - last
console.log(delta)
last = now
}, 1000)
setTimeout(clearInterval, 10000, interval)
// 1000
// 1003
// 998
// 1002
// 999
// 1007
// 1001
// ...
If you need a long running timer with high accuracy, I recommend you adapt the solution to use delta-based updates to the clock. If you rely upon setTimeout or setInterval for accuracy, you will be sad.
function countdown(elem, ms) {
return new Promise(function(resolve) {
function loop(ms, last) {
let now = Date.now()
let delta = now - last
if (ms <= 0) {
elem.innerHTML = 0
resolve(elem)
}
else {
elem.innerHTML = (ms/1000).toFixed(3)
setTimeout(loop, 25, ms - delta, now)
}
}
loop(ms, Date.now())
})
}
countdown(document.querySelector('#a'), 3000).then(
function(elem) { console.log('done', elem) }
)
countdown(document.querySelector('#b'), 5000).then(
function(elem) { console.log('done', elem) }
)
countdown(document.querySelector('#c'), 10000).then(
function(elem) { console.log('done', elem) }
)
<p id="a"></p>
<p id="b"></p>
<p id="c"></p>
Code:
var counter = 10;
var yourFunc = function(){}
var interval = setInterval(function(){
counter--;
if(counter <=0){ yourFunc(); clearInterval(interval); }
}, 1000);
I would use a recursive function
var countDown = function(secondsRemaining){
secondsRemaining -= 1;
if(secondsRemaining <= 0){
//execute
} else {
//wait 1 second and call again
setTimeout(function(){
countDown(secondsRemaining);
}, 1000);
}
}
then to initially start countdown (5 seconds)
countDown(5000);
I would use something like the following :
$(document).ready(function(){
var counter=10;
countDown();
function countDown(){
$('#showNumber').text(counter--);
if(counter>=0)
window.setTimeout(countDown,1000)
else
otherFunction();
}
function otherFunction(){
$('#showNumber').text('FINISHED!');
}
});
Try this out. It does not require jQuery.
var count = 5; // Number of times to run 'counter_function'.
// Run 'counter_function' every second (1000ms = 1 second)
var counter = setInterval(function(){
counter_function()
}, 1000);
// The function to run when 'count' hits 0.
var done_function = function() {
console.log('done');
}
// The function to run at each interval.
var counter_function = function() {
console.log('count');
count--;
if(count === 0){
done_function();
clearInterval(counter);
}
}
It will print the word 'count' every second for 5 seconds, and at the last second it will also print 'done'.
Are you looking for something like this OP?
This executes every second. You can use clearInterval() just as I added in the comment section whenever you want it to stop.
var start = 10; // time to countdown from in seconds
var interval = setInterval(
function(){
if (start == 0) {
complete();
clearInterval(interval);
}
$(".update").html("<h4>Countdown "+start+"</h4>");
start--;
}, 1000);
function complete() {
console.log("called the callback, value of start is: "+start);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="update">
</div>

Why the timer setTimeout returns the first value "2"

below the code. It should write down to console numbers from 0 to 19. Actually it does. But what is the first number it has print in console?
var i = 0;
var timerId = setInterval(function () {
console.log(i++);
}, 100);
setTimeout(function() {
clearTimeout(timerId)
}, 2100);
Although your code works as expected, it could be that under some conditions you wouldn't print all numbers. It might be better to check the counter value and then clear the interval at that time (timing in javascript is not really that precise as you might hope it to be)
You could try to do it like this though, to make sure that your interval can only run once, and that you don't exceed your max value.
function Counter(start, maxValue, ticks) {
this.value = start || 0;
this.max = maxValue;
this.ticks = ticks;
var interval;
this.stop = function() {
if (!interval) {
return;
}
clearInterval(interval);
console.log('stopped counter');
};
this.increase = function() {
this.value++;
console.log(this.value);
if (this.value >= this.max) {
this.stop();
}
};
this.start = function() {
if (interval) {
return;
}
console.log('starting counter');
interval = setInterval(this.increase.bind(this), this.ticks || 0);
};
}
var counter = new Counter(0, 20, 100);
counter.start();
From setInterval documentation
Calls a function or executes a code snippet repeatedly, with a fixed time delay between each call to that function. Returns an intervalID.

Clear setTimeout or reset function

I have a timer function and I want to clear the timeouts or reset the function, cause every time I execute it, a new timeouts are created, so I recieve several counts.
My idea is to reset the count every time I execute the function. I only want a 1 instance of timer and get the correct count. If if execute several times the function I want to restart to 0.
Here is my code:
var timeouts = new Array();
var timer = null;
io.sockets.on('connection', function (client)
{
client.on("start", function (){
console.log('Someone has pressed Start button',new Date().getTime());
//try to kill all timeouts
for (var timeout in timeouts) {
clearTimeout(timeout);
};
if(this.timer == null) {
this.timer = new timer(1000, function (data) {
io.sockets.emit('timeupdate', data);
})
}else {
this.timer = null;
});
});
function timer(delay, callback)
{
// self-reference
var self = this;
if (!(this instanceof timer)) {
return new timer();
}
// attributes
var counter = 0;
var start = new Date().getTime();
/**
* Delayed running of the callback.
*/
function delayed()
{
console.log(counter);
callback(counter);
counter ++;
var diff = (new Date().getTime() - start) - counter * delay;
var timeOut = setTimeout(delayed, delay - diff);
timeouts.push(timeOut);
}
// start timer
delayed();
var timeout = setTimeout(delayed, delay);
timeouts.push(timeout);
}
Thank you in advance.
Using clearTimeout() is the correct way. The problem is your for-loop. This might look like a classic foreach-loop, but it is not. You have to do:
for (var i=0; i< timeouts.length; i++) {
clearTimeout(timeouts[i]);
}
Alternatively, also I don't like this personally:
for (var i in timeouts) {
clearTimeout(timeouts[i]); // note how the array is indexed using var i
}
This is a common JavaScript pitfall - the for (x in y)-loop actually iterates over the array's indices, not the values. It can also iterate over an object's properties. Try it out:
var a = [3, 2, 5, 8];
for (var i in a) {
console.log(i);
console.log(a[i]);
}
var o = { test: 'hello', number: 1234 };
for (var x in o)
console.log(x);

Plain JS countdown with repeat and delay

I keep running into several issues when creating a countdown script
it does not run smoothly
hard to make it repeat (closure)
hard to delay the start and to delay the repeat (closure)
Can someone please help me FIX this code which should work in my opinion but doesn't
the processing I need is
a. counter starts delay number of seconds after the page loads,
b. when counter reaches 0, the countdown RE-starts after delay number of seconds
Here is my Fiddle
Issues:
when it starts, the counter seems to wait an additional second before counting down
it does not pause
the repeat starts after the counter has continued
.
// more accurate timer - https://gist.github.com/1185904
function interval(duration, fn){
this.baseline = undefined
this.run = function(){
if(this.baseline === undefined){
this.baseline = new Date().getTime()
}
fn()
var end = new Date().getTime()
this.baseline += duration
var nextTick = duration - (end - this.baseline)
if(nextTick<0){
nextTick = 0
}
(function(i){
i.timer = setTimeout(function(){
i.run(end)
}, nextTick)
}(this))
}
this.stop = function(){
clearTimeout(this.timer)
}
}
window.onload=function() {
var cnt1 = 10;
var delay1 = 5;
var timer1 = new interval(1000, function(){
document.getElementById('out1').innerHTML=cnt1--
if (cnt1 <= 0) { // trying to reset
timer1.stop(); // does not work
cnt1 = 10;
setTimeout(function() { timer1.run()},delay1*1000)
}
})
setTimeout(function() { timer1.run()},delay1*1000)
}
I've rewritten your code to produce the desired results. Your previous code was very inefficient. See my script comments for usage.
Fiddle: http://jsfiddle.net/RVBDQ/1/
/*
#name timer
#param number startFrom Starts counting down from this number
#param number delay Seconds to wait before repeating the counter
#param number intervalDelay Milliseconds between countdown
#param number runTimes Optional; Limit of counting. The function stops when it has run <runTimes> times. Default 1 (=one countdown)
#param Boolean noFirstRun Optional; If false, the counter starts off immediately. Default false
*/
function timer(startFrom, delay, intervalDelay, runTimes, notFirstRun){
if(typeof runTimes == "undefined") runTimes = 1;
if(runTimes-- < 0) return;
setTimeout(function(){
var ctn = startFrom;
var timer1 = window.setInterval(function(){
document.getElementById('out1').innerHTML = ctn--;
if(ctn <= 0){
clearInterval(timer1);
timer(startFrom, delay, intervalDelay, runTimes, true);
}
}, intervalDelay);
}, notFirstRun?delay*1000:0);
}
window.onload=function() {
timer(10, 5, 1000, 2);
//Runs two times, starts counting from 10 to 1, delays 5 seconds between counters.
}
Object exposing start([delay]) and stop().
http://jsfiddle.net/RVBDQ/3/
function interval(duration, fn, delay){
this.timer = null;
this.duration = duration;
this.fn = fn;
this.start(delay);
}
interval.prototype.start = function(delay){
if (this.timer) {return;}
var self=this;
this.timer = setTimeout(function(){ self.run(); }, delay||0);
};
interval.prototype.run = function(called){
var self = this,
nextTick = called ? this.duration - (new Date - called) : 0;
this.timer = setTimeout(function(){
self.fn();
self.run(new Date);
}, nextTick<0 ? 0 : nextTick);
};
interval.prototype.stop = function(){
clearTimeout(this.timer);
this.timer = null;
};
window.onload = function() {
var cnt1 = 10;
var delay1 = 5;
window.timer1 = new interval(1000, function(){
document.getElementById('out1').innerHTML=cnt1;
cnt1 = cnt1 === 1 ? 10 : cnt1-1;
}, delay1*1000);
};

Want a javascript function to run every minute, but max 3 times

I have a ajax javascript method that pulls data from a page etc.
I want this process to run on a timed interval, say every minute.
But I don't want it to loop forever, so max out at 3 times.
What is the best way to implement this?
Like this:
var runCount = 0;
function timerMethod() {
runCount++;
if(runCount > 3) clearInterval(timerId);
//...
}
var timerId = setInterval(timerMethod, 60000); //60,000 milliseconds
A closure-based solution, using setInterval() and clearInterval():
// define a generic repeater
var repeater = function(func, times, interval) {
var ID = window.setInterval( function(times) {
return function() {
if (--times <= 0) window.clearInterval(ID);
func();
}
}(times), interval);
};
// call the repeater with a function as the argument
repeater(function() {
alert("stuff happens!");
}, 3, 60000);
EDIT: Another way of expressing the same, using setTimeout() instead:
var repeater = function(func, times, interval) {
window.setTimeout( function(times) {
return function() {
if (--times > 0) window.setTimeout(arguments.callee, interval);
func();
}
}(times), interval);
};
repeater(function() {
alert("stuff happens!");
}, 3, 2000);
Maybe the latter is a bit easier to understand.
In the setTimeout() version you can ensure that the next iteration happens only after the previous one has finished running. You'd simply move the func() line above the setTimeout() line.
A reusable approach
function setMaxExeuctionInterval( callback, delay, maxExecutions )
{
var intervalCallback = function()
{
var self = intervalCallback;
if ( 'undefined' == typeof self.executedIntervals )
{
self.executedIntervals = 1;
}
if ( self.executedIntervals == maxExecutions )
{
clearInterval( self.interval )
}
self.executedIntervals += 1;
callback();
};
intervalCallback.interval = setInterval( intervalCallback, delay );
}
// console.log requires Firebug
setMaxExeuctionInterval( function(){ console.log( 'hi' );}, 700, 3 );
setMaxExeuctionInterval( function(){ console.log( 'bye' );}, 200, 8 );
This anonymous function (it doesn't introduce any new globals) will do what you need. All you have to do is replace yourFunction with your function.
(function(fn, interval, maxIterations) {
var iterations = 0,
id = setInterval(function() {
if (++iterations > maxIterations)
return clearInterval(id);
fn();
}, interval);
})(yourFunction, 60000, 3);
you can do with setInterval
var count = 0;
var interval = setInterval(yourFunction(), 1000);
function yourFunction (){
clearInterval(interval);
if(count < 3){
count ++;
interval = setInterval(yourFunction(), 1000);
}
// your code
}
To extend Tomalak function:
If you want to know how many cycles are left:
var repeater = function(func, times, interval) {
window.setTimeout( function(times) {
return function() {
if (--times > 0) window.setTimeout(arguments.callee, interval);
func(times);
}
}(times), interval);
}
and use:
repeater(function(left){
//... (do you stuff here) ...
if(left == 0) {
alert("I'm done");
}
}, 3, 60000);
Use setInterval, be sure to get a reference.
var X=setInterval(....);
Also, have a global counter
var c=0;
Inside the function called by the setIntervale do:
c++;
if(c>3) window.clearInterval(X);
You can use setInterval() and then inside the called function keep a count of how many times you've run the function and then clearInterval().
Or you can use setTimeout() and then inside the called function call setTimeout() again until you've done it 3 times.
var testTimeInt = 3;
function testTime(){
testTimeInt--;
if(testTimeInt>0)
setTimeOut("testTime()", 1000);
}
setTimeOut("testTime()", 1000);

Categories