the counter is doubling - javascript

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>

Related

Clearing an anonymous setInterval

How do you clear an anonymous setInterval function, like the following, so that i stops incrementing?
var i = 0;
setInterval(function(){
console.log(i);
i++;
}, 1000);
You need to store it in variable and then pass that variable in clearInterval.
var i = 0;
let variable = setInterval(function(){
i++;
console.log(i)
}, 1000);
//to clear interval after 5 seconds to check if it works
setTimeout(() => clearInterval(variable),5000)
This is highly NOT recommended!
Nevertheless, you can accomplish this by temporarily monkey-patching the window.setInterval function so you can capture the reference to the timer.
The following is a consolidated example, see further below for an implementation example.
// Declare a variable to store the interval
let rogueInterval = null;
//Override the setInterval method
const oldSetInterval = window.setInterval;
window.setInterval = (...args) => {
rogueInterval = oldSetInterval(...args);
}
var i = 0;
setInterval(function() {
console.log(i);
i++;
}, 1000);
// Reset it
window.setInterval = oldSetInterval;
// Will clear your rogueInterval after 5 seconds
setTimeout(() => {
clearInterval(rogueInterval);
}, 5000);
It sounds like you are including a script via script.src, therefore, you would need to put an inline script tag before to override the setInterval, and an inline script tag after to reset the setInterval:
<script> // JS that overrides the setInterval </script>
<script src="problem-file.js"></script>
<script> // JS that resets the setInterval </script>
Unfortunately, this approach assumes there is only one setInterval within the problem file, and the setInterval is not set asynchronously itself. If you absolutely needed to, you could leave the monkey-patch in place, and check the stringified version of the function being passed in, and if it matches some criteria, then capture it.

settimeout this. RangeError: Maximum call stack size exceeded

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 ().

Placing timer ID into its function

I would like to put timer ID, returned by setInterval(), into its function:
delay_timeout = setInterval(function () {
test_delay(data['time'], delay_timeout);
}, 1000);
Is it possible? To my mind delay_timeout doesn't have a value at this point...
I don't want to save delay_timeout globally for using later in timer's function to stop it. Several timers may work at the same time.
UPDATE:
Code is not global, it is located here:
socket.on('test_delay', function (data) {
...
});
The point is not to make delay_timeout global and be able to kill timer by some condition within its callback function.
your code works fine if you put the setTimeout call in it's own function like this:
function setTimer(){
var timeId = setTimeout(function(){ console.log(timeId); }, 1);
}
for(var i = 0; i < 10; i ++){
setTimer();
}
here's a fiddle
The delay_timeout variable is available to your callback as it is in the same enclosure.
So long as you are not in the same context and rerun your setTimeout before it has triggered the callback you will be fine. so this won't work:
var timeId;
for(var i = 0; i < 10; i ++){
timeId = setTimeout(function(){ console.log(timeId); }, 1);
}
(see the second half of the fiddle...)

Why is this javascript not running as expected?

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.

JavaScript. a loop with innerHTML is not updating during loop execution

I'm trying to refresh a div from Javascript at each loop and see 1, 2, 3, ....
The following code works, but only displays the final result (9998).
How is it possible to display all the steps?
Thank you in advance.
<html>
<head>
</head>
<body>
<div id="cadre" style="width=100%;height=100%;">
<input type="button" value="Executer" onclick="launch();"/>
<div id="result" ></div>
</div>
<script type="text/javascript">
function launch(){
for (inc=0;inc<9999;inc++){
document.getElementById('result').innerHTML = inc;
}
}
</script>
</body>
</html>
JavaScript execution and page rendering are done in the same execution thread, which means that while your code is executing the browser will not be redrawing the page. (Though even if it was redrawing the page with each iteration of the for loop it would all be so fast that you wouldn't really have time to see the individual numbers.)
What you want to do instead is use the setTimeout() or setInterval() functions (both methods of the window object). The first allows you to specify a function that will be executed once after a set number of milliseconds; the second allows you to specify a function that will be executed repeatedly at the interval specified. Using these, there will be "spaces" in between your code execution in which the browser will get a chance to redraw the page.
So, try this:
function launch() {
var inc = 0,
max = 9999;
delay = 100; // 100 milliseconds
function timeoutLoop() {
document.getElementById('result').innerHTML = inc;
if (++inc < max)
setTimeout(timeoutLoop, delay);
}
setTimeout(timeoutLoop, delay);
}
Notice that the function timeoutLoop() kind of calls itself via setTimeout() - this is a very common technique.
Both setTimeout() and setInterval() return an ID that is essentially a reference to the timer that has been set which you can use with clearTimeout() and clearInterval() to cancel any queued execution that hasn't happened yet, so another way to implement your function is as follows:
function launch() {
var inc = 0,
max = 9999;
delay = 100; // 100 milliseconds
var iID = setInterval(function() {
document.getElementById('result').innerHTML = inc;
if (++inc >= max)
clearInterval(iID);
},
delay);
}
Obviously you can vary the delay as required. And note that in both cases the inc variable needs to be defined outside the function being executed by the timer, but thanks to the magic of closures we can define that within launch(): we don't need global variables.
var i = 0;
function launch(){
var timer = window.setInterval(function(){
if( i == 9999 ){
window.clearInterval( timer );
}
document.getElementById('result').innerHTML = i++;
}, 100);
}
launch();
Try
document.getElementById('result').innerHTML += inc;

Categories