ZIM js JavaScript Framework

Canvas Components, Controls and more!

LOOPY! A New Way to Loop – with ZIM for HTML Canvas, JavaScript and CreateJS

b_circles

ZIM 4.3 has introduced a loop function that handles FOUR different tasks.  It has a more familiar format than a for loop:
for (var i=0; i<10; i++) {}
The params passed to the inner function are optional as is the reverse parameter which defaults to false.

zim.loop(obj, function(params){}, reverse);

1. when obj is a Number:

zim.loop(10, function(i, total) {
zog(i); // 0-9 on separate lines
});

2. when obj is an Array:

var array = [“a”, “b”, “c”];
zim.loop(array, function(val, i, total, array) {
zog(val); // a, b, c on separate lines
});

// so you really just need the first parameter
// same with the other examples…

zim.loop(array, function(val) {
zog(val);
});

3. when obj is an Object:

var obj = {city:”Hamilton”, street:”James”};
zim.loop(obj, function(prop, val, i, total, obj) {
zog(prop, val); // city Hamilton, street James
});

4. when obj is a Container:

var container = new zim.Container();

// then children are added – maybe in a zim.loop()
// and perhaps later during some event or time delay
// we might need to loop through the the container
// probably only need to collect the child parameter:

zim.loop(container, function(child, i, total, container) {
if (child.x > 500) container.removeChild(child);
}, true);

// set reverse parameter to true
// when removing children

To continue in the loop just return – that will exit the inner function and the loop will continue with the next iteration.

To break out of the loop just return a value.  This will stop the loop and return the value from the zim.loop() command:

var answer = zim.loop(10, function(i) {
if (i == zim.rand(4,9)) return i;
});
// if i is returned it goes into answer
// and breaks the loop

// else undefined would go into answer.

So… try it out – it is pretty nice.  You can read the docs here – LOOP DOCS and here are  ZIM BITS examples.

Dan

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Information

This entry was posted on December 8, 2016 by in interactive media, javascript and tagged , , .
%d bloggers like this: