Timers. Animations

SetTimeout




var someFunc =  function(){
    alert('Hello world!');
}


setTimeout(someFunc, 3000);


console.log('Some text');




var someFunc =  function(){
    alert('Hello world!');
}


var timer = setTimeout(someFunc, 3000);

console.log('Some text');

clearTimeout(timer);

// html


<html>
    <head>
        <title></title>
        <style>
            #circle{
                posirtion: absolute;
                left: 50px;
                top: 50px;
                height: 100px;
                width: 100px;
                border-radius: 50%;
                background: #000;
            }
        </style>
    </head>
    <body>
        <div id="circle"></div>
    </body>
</html>

Animations with setTimeout

// javascript


var delay = 100,
    i = 0,
    someFunc =  function(){
        var el = document.getElementById('circle'),
            pos = el.offsetTop;
        
        if (i < 10){
            setTimeout(someFunc, delay);
            elem.style.top = pos + 20 + 'px';
        }

        i++;
    }

someFunc();

SetInterval




var someFunc =  function(){
    alert('Hello world!');
}


setInterval(someFunc, 3000);

// html


<html>
    <head>
        <title></title>
        <style>
            #circle{
                posirtion: absolute;
                left: 50px;
                top: 50px;
                height: 100px;
                width: 100px;
                border-radius: 50%;
                background: #000;
            }
        </style>
    </head>
    <body>
        <div id="circle"></div>
    </body>
</html>

Animations with setInterval

// javascript


var delay = 100,
    i = 0,
    someFunc =  function(){
        var el = document.getElementById('circle'),
            pos = el.offsetTop;
        
        if (i < 10){
            elem.style.top = pos + 20 + 'px';
        }
        else{
            clearInterval(timer);
        }

        i++;
    }

var timer = setInterval(someFunc, delay);


var delay = 100,
    i = 0,
    someFunc =  function(offset){
        var el = document.getElementById('circle'),
            pos = el.offsetTop;
        
        if (offset > 0 && pos > 250) || (offset < 0 && pos < 50){
            clearInterval(timer);
            timer = setInterval(function(){
                startTimer(offset* -1);
            },delay);
        }

        elem.style.top = pos + offset + 'px';
    }

var timer = setInterval(function(){someFunc(20)}, delay);

JS - Timers. Animations

By andrei_bibik

Timers. Animations

SetTimeout

Animations with setTimeout

SetInterval

Animations with setInterval

JS - Timers. Animations

More from andrei_bibik