Populating array in Javascript using setInterval function - javascript

My objective is to populate an array dynamically using setInterval function. So I created a global variable array that I can access outside the scope of setInterval function. But when I try to do console.log, its empty.
However, if I try to do console.log inside the setInterval function, I can see the array populating every 1000 ms.
Its supposed to be a global variable so i should be able to see the variable right? How come it cannot be seen outside the function?
below is the code:
var array = [];
var n;
setInterval(function(){
n = Math.random();
if(n < 0.5){
array.push('white');
}else{
array.push('black');
}
// console.log(array); // i can see the array here
}, 1000);
console.log(array); // but i cannot see the array here
UPDATE:
Ok I now know the reason why its empty. So when I put a setTimeout of 5secs, I can now see the contents.
setTimeout(function(){
console.log(array); // i can now see the array!
}, 5000);

I'm pretty sure the array you "can't see" is actually displaying the correct array, an empty one. It gets called before the functions first array.push, so it shows up as empty.

Because you are using setInterval, with a 1 second delay, to add to the array the last line console.log(array); is executed before any of the interval function so the array would still be empty then.
Good info here: http://javascript.info/tutorial/settimeout-setinterval

setInterval schedules a function to be executed asynchronously. This means that the following code is executed first, finished, and only then, some time later, the scheduled function is started.

the reason why I cannot see the array is because theres not enough time for the console to log the contents so by putting another setInterval or setTimeout to delay the execution of console.log, I can now see the contents.
var array = [];
var n;
setInterval(function(){
n = Math.random();
if(n < 0.5){
array.push('meron');
}else{
array.push('wala');
}
// console.log(array); // i can see the array here
}, 1000);
setInterval(function(){
console.log(array); // i can now see the array!
}, 2000);

Related

Increment(i++) and (i+=1) in Javascript recursive call

I have a question about JS increment(++). I know many people here asked about ++ and +1 difference in JS but none of them mentioned it in recursive call sentence.
QUESTION:
I want to call function exec inside exec function recursively but the flowing script is not working well.
var exec = function(index){
if(index<7){
exec(index++);
}
}
exec(0);
output: Uncaught RangeError: Maximum call stack size exceeded
So I changed my script to the below and it worked well.
var exec = function(index){
if(index<7){
exec(index+=1);
}
}
exec(0);
Why it acts like differenctly in this example? Is my recursive call wrong?
index++ is post-increment. That means it increments the variable, but the value of the expression is the old value. So:
exec(index++);
is equivalent to:
var oldindex = index;
index += 1;
exec(oldindex);
So the recursive call uses the old value, which means you keep calling recursively with the same value, and never hit the limit that stops recursing.
You need to use pre-increment, which increments the variable and returns the new value:
exec(++index);
Actually, there's no reason to increment the variable at all, since you never uses it again in that function. Just do:
exec(index + 1);
The issue with index++ is that it is a post-increment, so it only increments the value of index after it's already been passed back into exec. Using the pre-increment (++index) should work, since it will then increment it before passing it into the recursive call.
var exec = function(index){
console.log(index)
if(index<7){
exec(++index);
}
}
exec(0);

Display index of an array with a delay of 3 seconds

In the following code, I tried to keep timeout but it doesn't work. I am sending array and expecting array index with 3 sec delay.
function displayIndex(arr){ // array as input
for(var i=0;i<arr.length; i++){
SetTimeout(function(){
console.log(i); // always returns 4
},3000);
}
}
displayIndex([10,20,30,40])
update:
var arr = [10,20,30,40];
function displayIndex(arr){ // array as input
for(var i=0;i<arr.length; i++){
setTimeout(function () {
var currentI = i; //Store the current value of `i` in this closure
console.log(currentI);
}, 3000);
}
}
displayIndex(arr); // still prints all 4.
Also, tried
arr.forEach(function(curVal, index){
setTimeout(function(){
console.log(index);
},3000);
}); // prints 0 1 2 3 but I do not see 3 secs gap between each display, rather one 3 sec delay before everything got displayed.
Use this:
function displayIndex(arr){ // array as input
var i=0;
var current;
run=setInterval(function(){ // set function inside a variable to stop it later
if (i<arr.length) {
current=arr[i]; // Asign i as vector of arr and put in a variable 'current'
console.log(current);
i=i+1; // i increasing
} else {
clearInterval(run); // This function stops the setInterval when i>=arr.lentgh
}
},3000);
}
displayIndex([10,20,30,40]);
1st: If you use setTimeout or setInterval function inside a for that's a problem 'couse all this are loops ways (the first two are loops with time intervals). Aaand setTimeout just run code inside once.
Note: setInterval need a function to stop it clearInterval, so that's why i put an if inside.
2nd: You are not setting currentI or i like a vector of arr operator. When you run an array the format is: arr[currentI], for example.
Doubts?
SetTimeout should be setTimeout. It's case-sensitive.
You're setting 4 timeouts all at once. Since you're incrementing the value of i every loop, it's going to be 4 at the end of the loop.
I'm not really sure what you're trying to do, but perhaps you wanted this?
setTimeout(function () {
var currentI = i; //Store the current value of `i` in this closure
console.log(currentI);
}, 3000);
The reason why it's behaving unexpectedly:
Case 1: In the first snippet, setTimeout() is adding the functions to the Event Queue to be executed after main thread has no more code left to execute. The i variable was passed as reference and, so the last modified value gets printed on each call since, it was passed by reference.
Case 2: In this case, since you are passing 4 explicit references, the values are different but, the execution order will same ( I.e., synchronous and instantaneous).
Reason: setTimeout() function always pushes the function passed to the queue to be executed with the delay acting as a minimum guarantee that it will run with the delayed interval. However, if there is code in the queue before the function or, any other code in the main thread, the delay will be longer.
Workaround: If you do not to implement blocking behaviour in code, I would suggest using an analogue of process.hrtime() for browser ( there should be a timing method on the window object and, write a while loop that explicitly loops until a second has elapsed.
Suggestion: I am somewhat confused as to why you need such blocking in code?

Why doesn't setTimeout wait to call a function?

I want to create a simple game of sorts. I am trying to duplicate a div recursively after a few seconds. After duplicated, it creates the new div with a new unique ID (ID+i).
The idea is that it keeps creating divs and the user has to click on them to remove them for as long as they can before it reaches the max (game over).
It won't properly wait to create the divs. I want to create new divs from the existing one every few seconds, but it either creates all 15 as soon as I run it or it only creates 1 and stops there.
JSFIDDLE -
https://jsfiddle.net/namelesshonor/msrkxq63/
function spawnFly() {
if(x >= 15){
alert("YOU LOST\n15 Flys have infested your screen!");
}
else if(x < 15) {
x++; // adds another fly to the counter
setTimeout(duplicate(), 2000); // spawns a new fly after a few secs
animateDiv(); // animate the spawned fly
spawnFly(); // called recursively until fly count is met
}
};
function duplicate() {
var original = document.getElementById('fly'+i);
var clone = original.cloneNode(true);
clone.id = "fly" + i++;
clone.onclick = swat;
original.parentNode.appendChild(clone);
};
function animateDiv(){
var newq = makeNewPosition();
var oldq = $('.shoo').offset();
var speed = calcSpeed([oldq.top, oldq.left], newq);
$('.shoo').animate({ top: newq[0], left: newq[1] }, speed, function(){
animateDiv();
});
};
The argument to setTimeout should be the function pointer to duplicate, not the result of calling the duplicate function.
setTimeout(duplicate(), 2000);
should be
setTimeout(duplicate, 2000);
Also, you might be intending to call the spawnFly function in the timeout, not the duplicate function. The duplicate function would then be called immediately to "spawn" a new fly. Then in 2 seconds, the spawnFly function is called to duplicate another fly and queue spawnFly again. The way you currently have it set up, the it immediately recurs into the spawnFly function, queuing up 15 flies to spawn in 2 seconds and immediately topping out the fly count (x)
Also, you're your increment of i causes an off by 1 error such that you're always trying to assign the value of the next fly to original. You should use pre-increment (++i) instead of post-increment (i++) to get your desired result
All changes applied:
https://jsfiddle.net/msrkxq63/3/
When you call setTimeout in your example, you're passing the result of duplicate(), not the function duplicate itself as the callback. As duplicate does not return anything, setTimeout tries to call the function undefined. You could either call it this way (as an anonymous callback):
setTimeout(function() { duplicate }, 2000)
or simply,
setTimeout(duplicate, 2000)
If you notice duplicate() in setTimeout(duplicate(),2000);,
it's a function call.
setTimeout 's first parameter is a function.
If you pass duplicate(),
it gets evaluated before the wait and looks for the return value and calls that.
Function or not, it waits after the function call and ends up doing nothing afterthe wait.
So we can say the flow is:
1​. Callback = duplicate()(duplicate is called before wait) = <return value of duplicate> instead of the function duplicate itself.
2. Milliseconds = 2000.
3. Call return value after 2 seconds.
The correct code is:
setTimeout(duplicate,2000)//Note that there are no brackets here

Delay a For Loop

I am trying to create a FOR loop that removes an element every 1000ms instead of rushing instantaneously through the array and perform the operations.
I am doing this for reasons of performance since going normally through the loop freezes my UI.
function removeFunction (i,selected) {
selected[i].remove();
}
function startLoop() {
var selected = paper.project.selectedItems;
for (var i = 0; i < selected.length; i++) {
if (selected[i].name === "boundingBoxRect") continue;
setTimeout(removeFunction(i,selected),1000)
}
}
It seems that the selected[i].remove() method is getting called without any delay. Why is that? Since I have set a Timeout of 1000ms shouldn't the items get removed with 1000ms interval between each?
Note
In the code above, I am skipping an item called boundingBoxRect since I don't want to remove that. Just stating this so there is no confusion
Simply turn it into a recursive function:
function removeFunction (i, selected) {
// If i is equal to the array length, prevent further execution
if (i === selected.length)
return;
// Remove ith child of selected array
selected[i].remove();
// Trigger same function after 1 second, incrementing i
setTimeout(function() {
removeFunction(++i,selected)
}, 1000);
}
// Trigger the function to begin with, passing in 0 as i
removeFunction(0, paper.project.selectedItems);
Here's a JSFiddle demo (using console.log instead of selected[i].remove(), as you haven't provided a definition for that function);
It seems that the selected[i].remove() method is getting called without any delay. Why is that?
Because that's what you're telling it to do. setTimeout(removeFunction(i,selected),1000) calls removeFunction immediately and passes its return value into setTimeout, exactly the way foo(bar()) calls bar and passes its return value into foo.
You can get the effect you want by using a builder function:
setTimeout(buildRemover(i,selected),1000);
...where buildRemover is:
function buildRemover(index, array) {
return function() {
removeFunction(index, array);
};
}
Note how buildRemover creates a function that closes over the index and array variables. Then it returns a reference to that function, which is what gets scheduled via setTimeout. When the timeout occurs, that generated function is called, and it calls removeFunction with the appropriate values.
You can also do something similar using ES5's Function#bind:
setTimeout(removeFunction.bind(null, i, selected),1000);
Function#bind returns a new function that, when called, will call the original (removeFunction above) use the given this value (null in our example) and arguments.

eval and setTimeout in a loop

I'm holding code lines in an array, and trying to run them cell by cell with setTimeout().
This executes the code well:
for (i=0; i<restorePoints.length; i++){
eval(restorePoints[i]);
}
but I want to have a short delay between every iteration: i want to use setTimeout() instead of eval(). for some reason none of those work:
for (i=0; i<restorePoints.length; i++){
setTimeout(restorePoints[i],1000);
}
or
for (i=0; i<restorePoints.length; i++){
setTimeout(eval(restorePoints[i]),1000);
}
how do I do it?
thanks
The loop is fast. It will create all timeouts in a row, so all timeouts will fire at the same time. You can either make the time depended on the loop variable, i.e. increasing the time in every iteration, or, what I would do, use only one timeout and a recursive call:
(function() {
var data = restorePoints;
var run = function(i) {
setTimeout(function() {
var entry = data[i];
if(entry) {
eval(entry);
run(i+1);
}
}, 1000);
};
run(0);
}());
Note that there is a difference between eval(string) and setTimeout(string, ...) apart from the delay:
eval will evaluate the parameter in the current scope while setTimeout (and setInterval) will evaluate it in the global scope.
This might be relevant to you.
If you're going to do it either of those ways, you'll need to wrap the function call in an anonymous function:
for (i=0; i<restorePoints.length; i++){
setTimeout(function(){eval(restorePoints[i]}),1000);
}
Otherwise you're not setting the eval to fire in a timeout, you're setting the result of the executing Javascript code (whatever that might be in this case) to be the thing setTimeout is opperating against.

Categories