Non-Blocking JavaScript with Clumpy | Maurizio Conventi

Non-Blocking JavaScript with Clumpy

Some months ago I worked on an experimental interface (I’d like to publish a post regarding it soon). I had a problem acting with javascript on a big number of dom elements. To solve that problem I used Clumpy.

“Clumpy emulates for, for…in, while, do…while, continue, and break. These can be labeled, nested, chained, and interspersed with non-loop operations. Execution can be paused and resumed in various ways.

It creates a managed chain of timeouts, promising to perform all the iterations in the proper order. The number of iterations performed in each single “clump” of execution is adjusted transparently to suit the speed of the computer executing the code.”

I found it really useful and interesting so I created two simple examples to show why it could be useful also for your projects.

In this case we want to append a text to an element 2000 times. Here you can see (and explore thanks to JSFiddle) my code in a standard loop. If you run it you’ll see that the code blocks your page.


Here there is the same code (adapted to use Clumpy). Run it to see the difference.


Thanks to JSFiddle you can interact with my code, try to change the number of iterations in both examples and see what happens.

To read more about Clumpy visit the usage guide and let me know.
Enjoy ;)

Tags: , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

*