Why RangeError: Maximum call stack size exceeded in this.startTime();
startTime() {
$('.m-codeModal-resendTimer').html(this.sectmr);
this.sectmr--;
if (this.sectmr < 0) {
this.sectmr = 0;
$('.m-codeModal-resendErrorNow').fadeIn(0);
$('.m-codeModal-resendErrorSec').fadeOut(0);
$('.m-codeModal-sorry').fadeOut(0);
}
setTimeout(this.startTime(), 1000);
}
Several things...
Add a function keyword to define your startTime function.
Remove the this keyword in the setTimeout reference to startTime.
The function setTimeout takes a callback as a parameter. You, instead of passing a callback parameter to the function, are actually calling the startTime function before the setTimeout function ever has a chance to evaluate and count down 1000 milliseconds.
Here's a simplified example:
var count = 0;
function startTime() {
count++;
document.getElementById('count').innerHTML = count;
setTimeout(startTime, 1000);
}
startTime();
<div id="count"></div>
You're in an infinite loop.
by calling startTime() function call for the first time, you are recursively calling startTime again once you enter the setTimeout function.
In your startTime() function as it is now, there is no way to exit it once you enter.
Maybe you'd want to try
if (this.sectmr < 0) {
...
return;
}
by adding the return statement, once your sectmr goes below zero and enters the if loop, you should be kicked out of the function. I'm not sure what your end goal is, however. Please be a bit more descriptive in the opening question.
The problem is that you're doing setTimeout(this.startTime(), 1000);, executing this.startTime() and using its return value (undefined in this case) as the timer handler. Just remove the ().
Related
I want to execute a block of code (which includes recursive setTimeout) at a certain exact time in javascript.By writing get_current function i get the current time and with setInterval method with 1 mili second interval i compare the current time( fetched from get_current function) with my desired time and if that condition satisfies i execute a block of code recursively. i test my code with console messages and i understand that only once this code is executed and if statement is checked only once.
could any one help me doing that???
var dateString;
var delay=1500;
function get_current() {
var mydate = new Date();
var mili_real = mydate.getMilliseconds();
var hour_real=mydate.getHours();
var minute_real=mydate.getMinutes();
var second_real=mydate.getSeconds();
if(minute_real<10)minute_real="0"+minute_real;
if(hour_real==0)hour_real="12";
if(second_real<10) second_real="0"+second_real;
if(mili_real<10)mili_real="00"+mili_real;
else if(mili_real<100) mili_real="0"+mili_real;
dateString=hour_real+""+minute_real+""+second_real+""+mili_real;
}
setInterval(checkStart(),1);
function checkStart() {
get_current();
if (dateString == 145412578) {
var timerId = setTimeout(
function request() {
console.log("request"+delay);
if(delay<1600){
delay++;
} else {
delay--;
}
timerId=setTimeout(request,dealy);
}, delay);
} else {
console.log("waiting to start");
}
}
First, let's take a look at the docs: It says that setInterval takes two main parameters. There are optionally additional parameters to pass to the function when it's called, but let's ignore those and focus on the first two parameters. The second parameter is the time in milliseconds, which is clear for you. The first parameter is a function. Let's see your call
setInterval(checkStart(),1);
You pass checkStart() as your first parameter. It's a function call. There is no return in that function, which means that it "returns" undefined. So, your code above is functionally equivalent with the following:
checkStart();
setInterval(undefined,1);
So, the solution should be to pass the function instead its result to setInterval:
setInterval(checkStart,1);
and as a result, checkStart should be regularly called.
While working on my personal project, I've encountered a problem. The problem is every time my function loops the counter counts twice.
JavaScript Code:
function punch(){
var hit;
var h1=100;
h1-=1;
counter++;
hit=setInterval('punch()',2000);
}
What I wanted it to do is that every 2000 milliseconds the counter goes up 1.
In your original code every time the function punch is called is called again internally.
var counter = 0;
function punch(){
var h1=100;
h1-=1;
counter++;
}
var hit = setInterval(punch,2000);
window.setInterval(function(){
/// call your function here
}, 2000);
Call your function where commented and inside the function increment your counter.
var counter = 0;
var h1=100;
setInterval(punch,2000);
function punch(){
h1-=1;
counter++;
}
Here you go: http://jsfiddle.net/9JLdU/3/
<div id="counter"></div>
<script>
var hit;
var counter = 0;
window.punch = function()
{
var h1=100;
h1-=1;
counter++;
document.getElementById('counter').innerHTML=counter;
}
hit = setInterval('punch()',2000);
</script>
setInterval will cause the function to be called about every 2 seconds until cancelled. By including another call to setInterval within the function, another sequence of calls is established each time it is called, so eventually you'll have thousands of instances running, each incrementing the counter.
So either use one call to setInterval, or have the function call itself using setTimeout, which only runs once. Also, it's preferred to pass a function reference to setInterval and setTimeout as passing a string calls the Function constructor and is effectively a call to eval, which is needlessly expensive in terms of system resources.
var counter = 0;
function punch() {
// ...
counter++;
hit = setTimeout(punch, 2000);
}
punch();
or
var counter = 0;
function punch() {
// ...
counter++;
}
setInterval(punch, 2000);
The advantage of setTimeout is that you can easily vary the delay based on some other logic, or stop the sequence without cancelling the timeout.
Note that when doing:
hit = setInterval(...);
the value of hit is an index that can be used to cancel the interval, it is not the value returned by punch (which is undefined since there is no return statement).
The setInterval() method calls a function or evaluates an expression at specified intervals (in milliseconds).
The setInterval() method will continue calling the function until clearInterval() is called, or the window is closed.
Read about setInerval() Here
Syntax
setInterval(function,milliseconds)
Working Example here
<script>
var hit = 100;
counter = 0;
var myVar = setInterval(function() {punch()}, 1000);
function punch() {
hit--;
counter++;
}
</script>
I was reading one book named 'Hands on node.js' by 'Pedro Teixiera'.
I was trying to execute one same program giving in that book that will call a function and that function is calling the same function recursively within some interval again and again.
But when I executed, it gives only one time '1' and stops
Please help me to figure it out why it is not able to call the same function again.
Sample program is as follows:
var schedule = function(timeout, callbackfunction) {
return {
start: function() {
setTimeout(callbackfunction, timeout)
}
};
};
(function()
{
var timeout = 10000; // 1 second
var count = 0;
schedule(timeout, function doStuff() {
console.log(++ count);
schedule(timeout, doStuff);
}).start(timeout);
})();
You aren't actually calling the function again. start() is the part that starts the timer.
schedule( timeout, function doStuff() {
console.log( ++count );
schedule( timeout, doStuff ).start(); // <--- added .start() here
}).start();
(Also note that the start() function doesn't take parameters.)
with some interval again and again
No, for that you would have used setInterval instead of setTimeout.
it gives only one time '1' and stops
Yes, your doStuff function doesn't put a new timeout. Your odd schedule function needs to be .start()ed!
I want to know, How it works the setInterval function.
First: I have simple example (Live demo)
Also the code below.
HTML:
<div id="elem"></div>
<div id="count"></div>
<div id="Timer"></div>
Javascript:
var s = 10;
var count = 0;
if (s == 20) alert("S= 20");
var timer = setInterval(function () {
if (count < 50) {
count++;
document.getElementById('count').innerHTML = "Counter: " + count;
}
else {
clearInterval(timer);
document.getElementById('count').innerHTML = "Counter: End Of Count";
}
}, 50);
s = 20;
document.getElementById('elem').innerHTML = "variable 's': " + s;
document.getElementById('Timer').innerHTML = "Timer value: " + timer;
if (s == 20) alert("S= 20");
All I want is how the function it works.
After implement the code of function , is it return to the beginning of code at top page , or return to implement the function code again until use clearInterval function.
Anybody help me please.
In your code, you are supplying an anonymous function to setTimeout.
The anonymous function supplied to setInterval is called asynchronously. The anonymous function cannot run for the first time until the current function is complete. The call to setInterval(function() {...}) is registering your anonymous function for execution every 50ms; it does not execute immediately.
Your program flow runs like this:
set initial variables
check if s == 20
register (not execute) the anonymous function with setInterval
set s = 20
print results
check if s == 20
end of your code blcok
...
50ms later, the first call to your anonymous setTimeout function finally happens
Repeatedly call the anonymous function every 50ms
Takeaway point: If you need certain operations to happen after the anonymous function completes, put those operations inside the anonymous function itself. In your code, I suspect you want some lines that currently come after the setTimeout call and place them inside the else block in your anonymous function.
setInterval keeps calling the enclosed function repeatedly till clearinterval is called. the delay can be given in seconds 1000 = 1 sec, since you have given a small delay of 50 the function is called repeatedly in quick succession till it reaches the 50 limit
function animateGraph() {
var graph;
for(i=0; i<10; i++)
{
var start = new Date();
while((new Date()) - start <= 500) {/*wait*/}
document.getElementById("timeMark").innerHTML = phoneX[i].epoch;
}
}
The loop works. The wait works. But the document.getElement is not showing up until the last item in the array...why?
Using setTimeout will allow the code to run and not lock up the page. This will allow it to run the code and will not effect other elements on the page.
var cnt = 0;
(function animateGraph() {
document.getElementById("timeMark").innerHTML = phoneX[cnt].epoch;
cnt++;
if (cnt<10){
window.setTimeout(animateGraph,500);
}
})();
The while loop, waiting for a datetime, is not a good way to wait - it just blocks execution. It keeps the browser (including UI, and its updating) frozen until the script finishes. After that, the window is repainted according to the DOM.
Use window.setTimeout() instead:
function animateGraph(phoneX) {
var el = document.getElementById("timeMark")
var i = 0;
(function nextStep() {
if (i < phoneX.length )
el.innerHTML = phoneX[i].epoch;
i++;
if (i < phoneX.length )
window.setTimeout(nextStep, 500);
})();
}
Please note that this runs asynchronous, i.e. the function animateGraph will return before all phoneXes are shown.
Use setTimeout instead of a while loop.
https://developer.mozilla.org/en/DOM/window.setTimeout
Also try something like this.
Javascript setTimeout function
The following snippet uses a helper function to create the timers. This helper function accepts a loop counter argument i and calls itself at the end of the timer handler for the next iteration.
function animateGraph() {
var graph;
setTimeMarkDelayed(0);
function setTimeMarkDelayed(i) {
setTimeout(function() {
document.getElementById("timeMark").innerHTML = phoneX[i].epoch;
if (i < 10) {
setTimeMarkDelayed(++i);
}
}, 3000);
}
}
You actually need some sort of helper function, otherwise you'll end up overwriting the value of i in your for loop in every iteration and by the time your timers run out, i will already be 9 and all handlers will act on the last element in phoneX. By passing i as an argument to the helper function, the value is stored in the local scope of that function and won't get overwritten.
Or you could use setInterval like Radu suggested, both approaches will work.