Manage a bunch of timers in javascript

In the last post it was about how I wrote the game for the js13kGames contest, the goal of which is to fit my craft on a stack of open web technologies of 13 kilobytes.

In addition to tricks with minifikatsii, the game inspired me to create a tool to control a large number of timers by wrapping them in a convenient interface and grouping. Code and cases in which it can be useful - under the cut.

A demo where you can launch rockets and check out a couple of code examples.

Where can this be used?

Frequently, the logic in games is divided into states ( states ) - small independent parts, for example: menu, level, victory screen. If we assume that the player can go into the menu during the game, putting what is happening in the pause level, we need to take care of preserving the context of the timers.

In my relatively comparatively poor experience, I met the following solution to this problem. Inside each object with time-bound logic, its timers are created, and when the object is destroyed, they are cleared. The disadvantage of this solution is that all timers need to be cleared manually.

One more example. If the game space consists of many small locations (recall, for example, The Binding of Isaac), we may want to store the state of objects and units in some of them. Again, you need to prescribe the ability to pause timers for each unit.

timestore

The main idea is to create a “timer space” that can be completely paused, resumed, cleaned and reused. The first, primitive version appeared already in the process of developing the game, and over the past weekend I wrote a more adequate version - timestore .

Two classes are used as timers: Timeout and Interval . Inside, both use setTimeout() . Both classes have methods with speaking names: .clear() , .pause() , .resume() and some more. Timers can be used directly, but the main feature is in the Timestore class.

When we create a timer through the timestore, it is saved to the collection, and then it can be accessed not only directly, but also by ID:

 var gameTimers = new timestore.Timestore(), simpleTimeout = gameTimers.setTimeout(callback, 5000), timeoutWithCustomId = gameTimers.setTimeout('customId', callback, 5000); someButton.on('click', function () { simpleTimeout.clear(); gameTimers.clearTimeout('customId'); }); 

Important : you cannot use numbers (and strings like '10' ) as custom IDs, since numbers are used as default identifiers inside the timestore.

Manage entire collections:

 gameTimers.pauseAll(); menuTimers.resumeAll(); 

If the fireBeforeClear flag is fireBeforeClear to the fireBeforeClear , then at the time of cleaning it will work:

 var lightBulb = new Interval(toggleLight, 100, true); function switchOff() { lightBulb.clear(); //        . } 

Another useful method is .getTimeLeft() . It returns the number of milliseconds until the next timer trigger.

What's next?

Plans for the next two or three days:

• add verification of user IDs so that the number cannot be transferred;
• write methods like .clearIntervals(['id1', 'id3', 'id5']) to make it easier to manage parts of the collection;
• add Interval.fireCounter - a property indicating how many times the timer has been triggered;
• and a related method, Interval.clearIn(times) , which allows you to clear the timer after several operations.

Also in the near future I will lay out a couple of examples on JSFiddle and CodePen.
At the moment there is a page with examples .

Ps . By the way, while doing the timestore, I used tests for the first time and, for those who still doubt, I will say: tests are cool!

Pps . Before starting to write code, I tried to find analogues, but I didn’t see anything similar. Maybe I was just looking bad, but are they? Share, podaluysta, if you met something like that.

PPPS . About states that states , you can read more here .