JSFiddle - React, Tailwind, and code Playground

by Kevin Faulhaber

HTML

<ul id="results">
    <li>0</li>
    <li>1</li>
</ul>
<div id="done"></div>

JavaScript

var li = document.createElement('li');
var ul = document.getElementById('results');
var div = document.getElementById('done');

var fib = function (cb) {

    var stock = 0,
        prev = 0,
        curr = 1;
    //Memorize starting time
    var start = new Date().getTime();

    //We calculate 10000 fibonnacci sequences
    setTimeout(function () {
        for (var i = 0; i < 10000; i++) {
            //we clone the first li
            var li_temp = li.cloneNode();

            //fib stuff
            stock = curr;
            curr = curr + prev;
            prev = stock;

            //prepare the visual with fib num + time
            li_temp.innerHTML = curr + '<br> time: <strong>' + (new Date().getTime() - start) + '</strong>';

            //we append the new li to the list.
            ul.appendChild(li_temp);
        }
        cb(start);
    }, 0);
}
//we are done and we check how long everything took
var callback = function (start) {
    div.innerHTML = 'We are done: ' + (new Date().getTime() - start);
}

fib(callback);