Skip to content
Do something repeatedly in X time
HTML JavaScript
Branch: master
Clone or download
Latest commit 573b00f Jul 16, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitattributes 🎊 Added .gitattributes & .gitignore files Jun 15, 2015
.gitignore 🎊 Added .gitattributes & .gitignore files Jun 15, 2015
README.md - Jul 16, 2018
do-in.js Added "pause" method and improved the whole mechanism Sep 22, 2016
index.html - Jul 12, 2018
package.json - Jul 12, 2018

README.md

Do-In

Do something repeatedly in X time.

A task runner which runs code repeatedly for X seconds and in a given duration of time and calling a step method with the progress so far. Most basic examlpe is counting to from one number to number.

Basic usage

// This function will be called repeatedly until the duration has reached
var step = function(t, elapsed){
    // easing
    t = t*t*t;

    // calculate new value
    var value = 300 * t; // will count from 0 to 300

    // limit value ("t" might be higher than "1")
    if( t > 0.999 )
        value = 300;

    // print value (converts it to an integer)
    someElement.innerHTML = value|0;
};

// This function will be called once, when the task has finished
var done = function(){
    console.log('done counting!');
};


// Define the task's specific settings
var settings = {
    step     : step,  // callback function for every "frame" of the task
    duration : 3,     // in seconds
    done     : done,  // callback function when the task is done
    fps      : 60
};

// create a new "Do-in" task
var task = new Doin(settings);

task.start();

Run task.pause() to pause at any moment.

Run task.start() to continue (un-pause)

Usage for DOM updates

When using Do-in for DOM updates, like the in the example or for animation purposes, I would recommend not to set an fps option for the Do-in instance, but let it run at full-speed and only apply an fps mechanisn within your step method. This will ensure smooth consistant frame-rate, and will not drop frames, because Do-in uses requestAnimationFrame internally.

Demo page

You can’t perform that action at this time.