Do not continue Javascript for-loop until specified - javascript

I need to pause a for loop and not continue until I specify. For each item in the array that I'm looping through, I run some code that runs an operation on a separate device, and I need to wait until that operation is finished before looping to the next item in the array.
Fortunately, that code/operation is a cursor and features an after: section.
However, it's been running the entire for loop instantly, which I need to prevent. Is there any way to prevent the loop from continuing until specified? Or perhaps a different type of loop or something that I should use?
My first (poor) idea was to make a while-loop within the for-loop that ran continuously, until the after: portion of the cursor set a boolean to true. This just locked up the browser :( As I feared it would.
Anything I can do? I'm fairly new to javascript. I've been enjoying my current project though.
Here's the while-loop attempt. I know it's running the entire loop immediately because the dataCounter goes from 1 to 3 (two items in the array currently) instantly:
if(years.length>0){
var dataCounter = 1;
var continueLoop;
for(var i=0;i<years.length;i++){
continueLoop = false;
baja.Ord.make(historyName+"?period=timeRange;start="+years[i][1].encodeToString()+";end="+years[i][2].encodeToString()+"|bql:select timestamp, sum|bql:historyFunc:HistoryRollup.rollup(history:RollupInterval 'hourly')").get(
{
ok: function (result) {
// Iterate through all of the Columns
baja.iterate(result.getColumns(), function (c) {
baja.outln("Column display name: " + c.getDisplayName());
});
},
cursor: {
before: function () {
baja.outln("Called just before iterating through the Cursor");
counter=0;
data[dataCounter] = [];
baja.outln("just made data["+dataCounter+"]");
},
after: function () {
baja.outln("Called just after iterating through the Cursor");
continueLoop = true;
},
each: function () {
if(counter>=data[0].length) {
var dateA = data[dataCounter][counter-1][0];
dateA += 3600000;
}
else {
var dateA = data[0][counter][0];
}
var value=this.get("sum").encodeToString();
var valueNumber=Number(value);
data[dataCounter][counter] = [dateA,valueNumber];
counter++;
},
limit: 744, // Specify optional limit on the number of records (defaults to 10)2147483647
offset: 0 // Specify optional record offset (defaults to 0)
}
})
while(continueLoop = false){
var test = 1;
baja.outln("halp");
}
dataCounter++;
}
}

Do not use a for loop to loop on each element. You need, in the after: to remember which element of the array you've just done and then move to the next one.
Something like this :
var myArray = [1, 2, 3, 4]
function handleElem(index) {
module.sendCommand({
..., // whatever the options are for your module
after: function() {
if(index+1 == myArray.length) {
return false; // no more elem in the array
} else {
handleElem(index+1)} // the after section
}
});
}
handleElem(0);
I assumed that you call a function with some options (like you would for $.ajax()) and that the after() section is a function called at the end of your process (like success() for $.ajax())
If the "module" you call is not properly ended in the after() callback you could use setTimeout() to launch the process on the next element with a delay
EDIT: With your real code it would be something like this :
function handleElem(index) {
baja.Ord.make("...start="+years[index][1].encodeToString()+ "...").get(
{
ok: ...
after: function() {
if(index+1 == years.length) {
return false; // no more elem in the array
} else {
handleElem(index+1)} // the after section
}
}
});
}

Related

starting & stopping timers: using 1 function for multiple instances

This is code used within nodered.
I'm invoking several timers with the same function, then either the timer actually runs and displays something,
or I stop the timer (clearTimeout) and the something doens't get displayed.
The first thing I tried is this:
// multiple calls method 1 - DOES NOT WORK (multiple calls of procedure with same name - no method to distuinguish
function displaysomethingelse7 (rdelay7, var37, var47) {
function performactualstuff (var3a7, var4a7) {
node.warn ("37:"+var3a7+", 47:"+var4a7);
}
timer7=setTimeout(performactualstuff, rdelay7, var37, var47);
node.warn ("starting timer27_inprocedure: "+timer7._idleStart);
function stop7() {
if (timer7) {
clearTimeout(timer7);
node.warn ("stopping timerid27 "+timer7._idleStart);
timer7 = 0;
}
}
return stop7;
}
// start 1
delay20=8500;
var20a=2;
var20b="b";
var t10 = displaysomethingelse7 (delay20, var20a, var20b);
// start 2
delay21=10500;
var21a=3;
var21b="c";
var t11 = displaysomethingelse7 (delay21, var21a, var21b);
// stop 1 ?
stopdelay30=8000;
setTimeout(t10, stopdelay30);
// stop 2 ?
stopdelay31=9000;
setTimeout(t11, stopdelay31);
This doens't work since the 'stop7' function has no method to disguinguish between timerIDs.
So I came up with an array of functions:
// multiple calls method 2 - array of functions
function displaysomethingelsetoo (r2delay, var77, var88) {
function performactualstufftoo (var77a, var88a) {
node.warn ("77:"+var77a+", 88:"+var88a);
}
timer8=setTimeout(performactualstufftoo, r2delay, var77, var88);
node.warn ("starting timer77_inprocedure= "+timer8._idleStart);
if (typeof stopa === 'undefined') stopa=[];
stopa[timer8._idleStart] = function (tf) {
if (tf) {
clearTimeout(tf);
node.warn ("stopping timerid3 "+tf._idleStart+"originaltimer="+timer8._idleStart);
tf = 0;
}
}
return stopa[timer8._idleStart];
}
// start 1
delay3=4000;
var5a=4;
var6a="d";
var t3a = displaysomethingelsetoo (delay3, var5a, var6a);
// start 2
delay4=5000;
var5b=5;
var6b="e";
var t3b = displaysomethingelsetoo (delay4, var5b, var6b);
// stop 1 ?
stopdelay3=2000;
setTimeout(t3a, stopdelay3, t3a);
// stop 2 ?
stopdelay4=3000;
setTimeout(t3b, stopdelay4, t3b);
But this isn't quite correct yet either - the stopa array has all the same function in it.
I think the solution could be to pass the parsed timer8 variable to the stopa[timer8._idleStart] function,
but I have no idea how to to do this.
This doens't work since the 'stop7' function has no method to disguinguish between timerIDs
You will want to use a closure here. I think you already tried to use one, and your code is structured like you were using one, there's only a tiny modification necessary: declare the variable as local to the displaysomethingelse7 function so that each invocation will create a new variable.
function displaysomethingelse(rdelay, a, b) {
function performactualstuff() {
node.warn ("37:"+a+", 47:"+b);
// btw, you'll want to close over a and b here as well
}
var timer = setTimeout(performactualstuff, rdelay);
// ^^^
node.warn ("starting timer_inprocedure: "+timer._idleStart);
return function stop() {
if (timer) {
clearTimeout(timer);
node.warn ("stopping timer "+timer._idleStart);
timer = 0;
}
};
}

clearInterval doesnt stop loop

I have the following code
startProgressTimer: function () {
var me = this,
updateProgressBars = function (eventItems) {
alert("updateProgressBars: looping");
alert("me.eventProgressTimerId:" + me.eventProgressTimerId);
var i = 0;
if (eventItems.length === 0) {
alert("internal Stop Begin")
clearInterval(me.eventProgressTimerId);
alert("internal Stop End")
eventItems = [];
}
for (i = 0; i < eventItems.length; i++) {
if (eventItems[i]._eventId) {
eventItems[i].updateProgressBar();
}
}
};
alert("Start Progress Timer");
this.eventProgressTimerId = setInterval(function () {
updateProgressBars([]);
}, 10000);
}
When the function is called I would expect it to run and bottom out only it keeps on looping.
screen output
ALERT:updateProgressBars: looping
ALERT:me.eventProgressTimerId:10
ALERT:internal Stop Begin
ALERT:internal Stop End
ALERT:updateProgressBars: looping
ALERT:me.eventProgressTimerId:10
ALERT:internal Stop Begin
ALERT:internal Stop End
Any ideas
I suspect the problem might be that the code you don't show calls the startProgressTimer() method more than once for the same instance of whatever object it belongs to, and then within the method you store the interval id in an instance property this.eventProgressTimerId - so multiple calls overwrite the property and you'd only be able to cancel the last one.
If that's the case, a simple fix is to declare your eventProgressTimerId as a local variable within startProgressTimer().

JS will not loop, stops after first loop

I've written the code below to act as a simple slideshow in the header of a clients website. Now, the only problem is when I put it into a for or a while loop it gets to the end of the first loop and then stops.
I've tried using calling togglinga() in the last callback, I've tried, wrapping the whole thing in a for and while loop, I've tried creating a different function that calls this one and then using that same function name in the final call back but get the same result everytime. I'd really appreciate someone casting their eye over this to see if they can see anything I can't....
function triggerAnimation(){
$("#logoareacontainer").delay(15000).fadeOut(3000, function() {
$("#title-1").fadeIn(0).delay(0, function() {
$("#cdsl-1-1").fadeIn(1000).delay(2000).fadeOut(0, function(){
$("#cdsl-1-2").fadeIn(0).delay(2000).fadeOut(0, function(){
$("#logoareacontainer").fadeIn(1000).css({display:'block'})
})
})
})
})
}
Much shorter and easier if you break this into functions that can be called in a cyclical manner.
Note that .delay() doesn't accept a callback function, which was a big part of the problem.
Here's a demo: http://jsfiddle.net/kjaHZ/
// for each "title-", keep track of how many "cdsl-"s there are
var titles = [null, 4, 2, 2, 2, 1, 1];
start();
// start it off
function start() {
$("#logoareacontainer").delay(1500).fadeOut(3000, function () {
doTitle(1);
});
}
// this starts a "title-" section
function doTitle(i) {
if (i < titles.length) {
// do the "title-" for the given "i" variable
$("#title-" + i).fadeIn(0, function () {
// after fading in, do the "cdsl-" ids
doCDSL(i, 1);
});
} else {
// or if "i" is >= titles.length, we're done
$("#logoareacontainer").fadeIn(1000).css({display:'block'});
}
}
// this starts a "cdsl-" section
function doCDSL(i, j) {
$("#cdsl-" + i + "-" + j).fadeIn(1000)
.delay(2000)
.fadeOut(0, function () {
if (j < titles[i]) {
// move to the next "cdsl-"
doCDSL(i, j+1);
} else {
// or do the next "title-"
$("#title-" + i).fadeOut(1000).css({display:'none'})
doTitle(i+1);
}
})
}
although your code is pretty awfull here u are :) u missed ()
function togglinga(){ triggerAnimation(); };
You can't put the code in a loop, because it is asynchronous. The loop would just start all the animations at once, because the outermost call won't wait until all the animations are complete.
At the innermost level, just call triggerAnimation to make it restart.

implement a runner that iterates over an array

BOLD denotes updates.
I have an array, steps, whose contents are objects with an action and element associated with them. Like so:
steps = [{action: 'click', element: <jQuery element>},
{action: 'click', element: <jQuery element>}, ., ., N]
I would like to implement a runner, whose job is to run through each element in the array and perform the particular action upon the element. Each step must be performed in serial. So for example, if you have:
steps = [{action: 'click', element: <jQuery element representing a button>},
{action: 'click', element: <jQuery element representing an anchor tag>}]
Running, run(steps, timeout), would run through each step. step[0].action would be performed on step[0].element. Since it is possible for step[0] to create the dom element (by means of AJAX) to be interacted with in step[1], the runner needs to wait a particular period(hence, the timeout), polling the dom for the presence of step[1].element.
Here is a rough take at what I have so far:
var run = function() {
$.each(steps, function(i, v) {
var interval = 25,
start = 0,
timeout = 3000;
var i = setInterval(function(timeout) {
start = start + interval;
console.log(start);
if ($(v).is(':visible')) {
v.click();
console.log('clicked', v);
clearInterval(i);
}
}, interval);
});
};
Note that in the above example, steps is just an array of jquery objects. It isn't in the desired format just yet:
steps = [{action: 'click', element: <jQuery element>},
{action: 'click', element: <jQuery element>}, ., ., N]
What is the 'pattern' so to say, that I need to follow? Do I need to use deferred objects to take care of this? Is it implemented with a setTimeout, setInterval? Thanks!
Final implementation
var run = function(steps, interval, timeout) {
var timer,
time = 0,
i = 0;
runSingle(steps[0]);
function abort() {
console.log("Run aborted");
}
function runSingle(step) {
timer = setInterval(function() {
time += interval;
if ($(step.element).is(':visible') === true) {
clearInterval(timer);
time = 0;
$(step.element).trigger(step.action);
(i < (steps.length - 1)) && runSingle(steps[++i]);
} else if (time >= timeout) {
clearInterval(timer);
abort();
}
}, interval);
console.log("Performed: ", step.action, "on", step.element)
if (i === (steps.length - 1)) console.log("Run successful");
}
}
Here's something. I haven't tested it thoroughly:
var run = function(steps, interval)
{
var timer,
time = 0, timeout = 10000,
ciel = steps.length - 1,
i = 0;
run_single(steps[0]);
function run_single(item)
{
timer = setInterval(function()
{
var $el = $(item.selector);
time += interval;
if ( $el.length )
{
clearInterval( timer );
time = 0;
$el.trigger( item.action );
i < ciel && run_single( step[ ++i ] );
}
else
{
if ( time >= timeout ) clearInterval( timer );
}
}, interval);
}
};
var steps = [
{action: 'click', selector: '#first'},
{action: 'hover', selector: '#second'},
{action: 'change', selector: '#third'}
// and so on...
];
run(steps, 100);
See it here in action: http://jsfiddle.net/myaeh/
First up, note that in your example the v variable will represent an object from your array and thus it doesn't make sense to say v.click() or $(v).is(':visible') - you'd want to say v.element.click() or v.element.is(':visible').
If you mean that action will be a string that is the name of a jQuery method, and element is a jQuery object, then you can do something like this:
$.each(steps, function(i, obj) {
obj.element[obj.action]();
});
If element is a string representing a selector that should be used to create a jQuery object then:
$.each(steps, function(i, obj) {
$(obj.element)[obj.action]();
});
You don't need to introduce the polling concept unless the action might do something asynchronously, for example, if it does a fade-in, or adds elements via Ajax.
In your example the only criterion you seem to be applying for whether to proceed with the current step is whether the current element is visible. If that's the case you can do something like this:
var run = function(steps, delay, timeout) {
var i = 0,
nextStep = function() {
if (i < steps.length) {
var step = steps[i],
retryDelay = 25,
retryTotal = 0,
intervalId = setInterval(function() {
retryTotal += retryDelay;
var $el = $(step.element);
if ($el.is(':visible')) {
$el[step.action]();
clearInterval(intervalId);
i++;
setTimeout(nextStep, delay);
} else if (retryTotal >= timeout) {
clearInterval(intervalId);
}
}, retryDelay);
};
}
nextStep();
};
run(steps, 50, 3000);
The run() function defines a nextStep() function that uses setInterval to keep checking whether the current element is visible. Once it is, it performs the action, clears the interval, and moves on to the next element by calling itself via setTimeout.
I wasn't sure how to fit the timeout concept in with the polling, because if the current element isn't visible after the specified amount of time what would you do? You can't really continue on to the next element because it too might depend on previous steps. I guess you could just abort the whole thing by clearing the interval and not calling nextStep() again. EDIT: I've updated the code to work as per that last sentence.

javascript closures in loops

//I have the following function:
function handle_message(msg)
{
//do work
console.log('some work: '+msg.val);
//call next message
msg.next();
}
//And array of message objects:
var msgs = [ {val : 'first msg'}, { val : 'second msg'}, { val : 'third msg'}];
//I link messages by setting next parameter in a way that it calls handle_message for the next msg in the list. Last one displays alert message.
msgs[2].next = function() {alert('done!')};
msgs[1].next = function() {handle_message(msgs[2]);};
msgs[0].next = function() {handle_message(msgs[1]);};
//Start the message handle "chain". It works!
handle_message(msgs[0]);
//======== Now I do exactly the same thing but I link messages using the for loop:
for (var i=msgs.length-1; i>=0; i--)
{
if (i==msgs.length-1)
{
msgs[i].next = function() {alert('done!');};
}
else
{
msgs[i].next = function() {handle_message(msgs[i+1]);};
}
}
//Start the message handling chain. It fails! It goes into infinite recursion (second message calls itself)
handle_message(msgs[0]);
Can sombody explain why it happens? Or maybe an alternative to this pattern? My case is this: I receive an array with messages and I have to handle them in order, one ofter another SYNCHRONOUSLY. The problem is some of the messages require firing a series of animations (jqwuery animate() which is async) and the following messages cannot be handled until the last animation is finished. Since there is no sleep() in javascript I was trying to use such pattern where the message calls the next one after it is finished (in case of animations I simply pass the 'next' function pointer to animate's "complete" callback). Anyway, I wanted to build this 'chain' dynamically but discovered this strange (?) behaviour.
You need a closure to make it work:
function handle_message( msg ) {
console.log( 'some work: ' + msg.val );
msg.next();
}
var msgs = [{val :'first msg'},{val:'second msg'},{val:'third msg'}];
for ( var i = msgs.length - 1; i >= 0; i-- ) {
(function(i) {
if ( i == msgs.length - 1 ) {
msgs[i].next = function() { alert( 'done!' ); };
} else {
msgs[i].next = function() { handle_message( msgs[i + 1] ); };
}
})(i);
}
handle_message( msgs[0] );
Live demo: http://jsfiddle.net/simevidas/3CDdn/
Explanation:
The problem is with this function expression:
function() { handle_message( msgs[i + 1] ); }
This function has a live reference to the i variable. When this function is called, the for loop has long ended and the value of i is -1. If you want to capture the current value of i (the value during the iteration), you need to an additional wrapper function. This function captures the current value of i permanently (as an argument).
I think the problem is that i doesn't have the value you think it has:
// i is defined here:
for (var i=msgs.length-1; i>=0; i--)
{
if (i==msgs.length-1)
{
msgs[i].next = function() {alert('done!');};
}
else
{
msgs[i].next = function() {
// when this line gets executed, the outer loop is long finished
// thus i equals -1
handle_message(msgs[i+1]);
};
}
}
See point #5 Closures in loops at http://blog.tuenti.com/dev/top-13-javascript-mistakes/
Think about the values you are capturing in the closure.
msgs[i].next = function() {handle_message(msgs[i+1]);};
This captures the value of i, but it changes the next iteration so you get an infinite loop.
By the end of the loop i is -1 so i+1 is going just going to be the same message over and over again.

Categories