Better RAF

by bakhshi

HTML

<header><button class="start">Start</button></header>
<div class="first"></div>
<div class="second"></div>

CSS

header{
    clear:both;
}

div{
    width:200px;
    height:200px;
    float:left;
}

.first{
    background-color: red;
}

.second{
    background-color: blue;
}

JavaScript

'use strict';

const $ = document.querySelectorAll.bind(document);

function clicked(){
    let count = 100;
    const element = $('div.first')[0];
    var update = ()=>{
        const width = element.offsetWidth;
        element.style.width = `${width + 2}px`;
        const newWidth = element.offsetWidth;
        let test = '';
        for(let a =0; a < 1000; a++)
            for(let a = 0; a < 1000; a ++)
                test += '.';
        console.log(test[10]); 
        count --;
        if(count > 0)
            requestAnimationFrame(update);
    };
    requestAnimationFrame(update);
}

$('.start')[0].addEventListener('click', clicked);