Fork me on GitHub

Crono.js

The lightweight time delay manager for websites!

Crono.js is a lightweight (938 bytes minified) Javascript Framework for managing delays on loops and input for websites, web applications, games animations and more. Here are some examples:

Example 1: Delay while click a button.

When you will click this button, you will change the text for a short amount of time.

example1 = new Crono(returnNormal, 1000, 1);

When you call Crono, the first parameter is the callback function, the second is the delay time in milliseconds and the third is the property. By putting 1 we run this function once.

Example 2: Check Delay when clicking or pressing a button.

This function returns true or false based on the time passed and the delay parameter. Try this button now.

example2 = new Crono(clickCounter, 3000, "clickCounter");

If the property parameter is a string (it can be anything except Crono and JavaScript keywords) then Crono check only if the time is passed or not, so you can control better the input delay, useful mainly for games. This, for example, is the function used for the button:

example2 = new Crono(clickCounter, 3000, "clickCounter");
        let clickTimes = 0;
        function clickCounter() {
        if(example2.checkDelay() == true) {
        clickTimes++;
        let clickButton = document.querySelector("#clickButton");
        clickButton.innerHTML = "Button times pressed every 3 seconds: " + clickTimes;
        }
        }

So if the 3000 milliseconds didn't pass since the first time you pressed the button, you can't call the function unless the delay time is passed.

Example 3: Simulating a clock by passing a function in a infinite loop.

You can make a function and use Crono for putting it in a endless loop. This, for example, is a basic clock created with Crono and the function code:

example3 = new Crono(clockSimulation, 1000, 0);

If you put a 0 in the property, then the loop will be infinite. Currently there is no option for negative property, so it's not recommended to do it.

Example 4: Check Delay with more conditions.

You can use the your_variable.checkDelay() with more conditions. I simulated some magic casting in a button, try it!

example4 = new Crono(castMagic, 2000, "castMagic");

So if you have magic points AND two seconds passed, you can use the magic. Here is the function I used:

let example4 = new Crono(castMagic, 2000, "castMagic");
        let magicPoints = 10;
        let magicButton = document.querySelector("#magicButton");
        magicButton.innerHTML = "Magic left you can use per two seconds: " + magicPoints;
        function castMagic()
        {
        if(magicPoints > 0 && example4.checkDelay() == true)
        {
            magicPoints--;
            
            magicButton.innerHTML = "Magic left you can use per two seconds: " + magicPoints;
        }
        else if(magicPoints <= 0)
        {
            alert("Sorry, you used all the magic :(");
            let magicButton = document.querySelector("#magicButton");
            magicButton.innerHTML = "There is no more magic left :( ";
        }
        }

But what if I want to call a function immediately when call a function? Let's see this in the Example 5 below.

Example 5: Simulating a clock by passing a function called immediately in a infinite loop.

If you need to call the function as soon as possible before the loop, you can, if it's finite or infinite:

example5 = new Crono(clockSimulation2, 1000, 0, true);

The fourth parameter is optional and called "isFirstLoop". If it's true, the function is called first, otherwise you will run the loop as always.

Example 6: Pause and Resume one or more animations

If you want to make a pause button, then you can pause at resume at will your loops. You need the pause() method for doing that. Try a really basic fight by pressing the button and use the pause for testing it:

your_variable.pause();

On that case, you can pause some or all loops when you want. Here is the functions used for this example:

let hitPoints = 100;
        let hitPointsMax = 100;
        let regenerationPoints = 5;
        let swordDamage = 30;
        let regenerationDelay = 1000;
        let swordDelay = 3000;
        let isAlive = true;
        let example6_regeneration = new Crono(regenerationSpell, regenerationDelay, 0);
        let example6_damage = new Crono(simulateDamage, swordDelay, "swordAttack");
        let example6_button = document.querySelector("#swordGame");

        function regenerationSpell()
        {
        if(hitPoints < hitPointsMax && isAlive == true)
        {
            hitPoints += regenerationPoints;
            if(hitPoints > hitPointsMax)
            {
            hitPoints = hitPointsMax;
            }
        }
        example6_button.innerHTML = "Hit Points Left: " + hitPoints + " / " + hitPointsMax;
        }

        function simulateDamage()
        {
        if(example6_damage.checkDelay() == true && isAlive == true)
        {
            hitPoints -= swordDamage;
            if(hitPoints <= 0)
            {
            hitPoints = 0;
            isAlive = false;
            alert("Game Over! Refresh the page to play again!");
            }
            example6_button.innerHTML = "Hit Points Left: " + hitPoints + " / " + hitPointsMax;
        }
        }

        function pauseGame()
        {
        example6_damage.pause();
        example6_regeneration.pause();
        }

Now, let's talk more about the finite loops.

Example 7: Restart a Finite loop.

A finite loop is the loop with an effective end. checkDelay() can be not used, the infinite loop can be stopped by using pause, but what about the finite loop? Press the button to restart the loop:

example7.restart();

It takes only this. Now, as a final step, let's pause a loop before calling it.

Example 8: Pause a loop before executing it.

A finite loop is the loop with an effective end. checkDelay() can be not used, the infinite loop can be stopped by using pause, but what about the finite loop? Press the button to restart the loop:

example8 = new Crono(moneyCollected, 500, 0, true, true);

The last parameter set if you pause the loop before executing or not.