Welcome
Features (API)

Note: All examples use jQuery.

Example JS
In our first example, we have a simple demonstration of the loopWhile() and interval() block attributes to be used as a count down timer. After the loop we have a code block() that will set the transition left of the color boxes.
Example HTML
Example CSS
Output
Run
Click "Run" to see the result.
You should have seen the timer count down from 3 and when it reached zero, disappear and then the color blocks transition to their new left position.

The main property of ThreadJS that makes this possible is that each code block() is scheduled to run only after the previous one has completed. This can be overridden as you will learn in future lessons but most of the time this is how you will use it. In this example the first block() is told to loopWhile() the cnt variable is greater than -1 and then close. After which the next block() will execute.

Other types of loops are loop() and loopTime(). Take a look at the examples below before moving on to see how those work and could have been used instead the standard loop method.

Loop
Example JS
In this example, we have a simple demonstration of the loop() and interval() attributes to be used as a count down timer. We are using the thread block object properties loopCount() and execCount() to get the timer value.
Example HTML
Example CSS
Output
Run
Click "Run" to see the result.
You should have seen the timer count down from 3 and when it reached zero, disappear and then the color blocks transition to their new left position.

We assigned a value of 4 to the loop() method. This tells the block to execute it's code 4 times before closing. Note that loops don't have to have a set count. If you pass no value, then it would loop infinitely.

Loop Time
Example JS
In this example we used
loopTime()
and pass the length of time in milliseconds we want the loop to execute.
Example HTML
Example CSS
Output
Run
Click "Run" to see the result.
You should have seen the timer count down from 3 and when it reached zero, disappear and then the color blocks transition to their new left position.

You will notice the loop executes 4 times despite the interval being 1 second and the total loopTime() being 3 seconds. This is because unlike normal setInterval(), block loops that are valid (meaning they aren't supposed to close do to any condition) will execute immediately on the first pass. So in this case it executed at 0,1,2 and 3 seconds before closing.