[turboid] javascript solutions

Real loops in JavaScript

Finally: Fast loops without freezing the browser

Many people who begin to develop websites and applications with JavaScript but have already learnt programming languages such as Java or Visual Basic are heavily surprised to discover that the for- and while-loops of JavaScript are almost useless compared to those ones in other languages, because, in JavaScript, if you make such a loop lasting too long, it completely freezes the browser.

So they have to learn that in JavaScript things work a little bit different, and they get in contact with the window.setInterval()-function:

	var loop = window.setInterval(function(){
		// Do something
	}, 1000);

This code executes a function every 1000 milliseconds. This way we can simulate some kind of a loop without freezing the browser. But shortly after this we must realize that this one is a quite poor alternative to real loops:

• It is too long and complicated.
• The code written after it does not wait until the loop is finished - it is executed at the same time instead.
• There is no built-in or simple possibility for telling the loop to end after a certain number of laps.
• Even after finishing the loop with window.clearInterval(loop): In the other languages your program always simply proceeds with the code written behind the loop, which is not the case with window.setInterval().
• It is way to slow, even if you change the millisecond argument to 1.

Hence, wouldn't it be quite cool if we could do something like this:

	loop(function(){
		// Do something...
	});

Actually, exactly that is possible! You only need to use the free Turboid framework or its core as described at the end of this article. This gives you a powerful feature at your fingertips, because it not only lets you specify how long the intervals should be, but also after which number of laps you wish to end the loop - in the following example the loop is ended after five laps:

	loop(function(){
		// Do something...
	}, 1000, 5);

This is why it is often a good replacement for for loops (please see the article "For loops with Turboid loop").

A genious feature of the loop()-function is that it allows you to proceed after this directly with the code written after it, as long as you use loop.then() for this purpose.

	loop(function(){
		// Do something...
	}, 1000, 5);
	
	loop.then(function(){
		alert("Finished!");
	});

This even works if you break the loop long before going through its last lap. Breaking it is simply done with loop.exit(). In the following example we specify 25 laps but tell the script to exit the loop if a variable has reached a certain value (there could also be other conditions instead of this - for example a mouse click done by the user):

	var x = 0;
	
	loop(function(){
		x++;
		if(x==10)
			loop.exit();
	}, 1000, 25);
	
	loop.then(function(){
		alert("Finished!");
	});

But our loop feature is even more powerful. While it is not faster than window.setInterval() you can accelerate it using loop.turbo(). In the following example we make it 30 times faster:

	loop.turbo(function(){
		// Do something...
	},30);

You still can specify the number of laps, for example 10000:

	loop.turbo(function(){
		// Do something...
	},30, 10000);
	
	loop.then(function(){
		alert("Finished!");
	});

What you need to use this technique? Download the free Turboid framework and put it into the directory of your HTML file, then write this line into the head section of your HTML file, and that's it:

Alternatively, you can use the smaller Turboid core if you don't want to download the whole framework.