JSFiddle - React, Tailwind, and code Playground

by danheberden

HTML

<div id="count"></div>
<button>Cancel</button>
<ul id="requests"></li>

CSS

li {
    font-size:.8em;
    height:2em;
    overflow:hidden;
    border-bottom: 1px solid #555;
    margin-top:4px;
    padding-bottom:4px;
}

JavaScript

var limit = 10000,
    $requests = $('#requests'),
    $count = $('#count'),
    total = limit,
    run = function() {
        $.getJSON( 'http://yuilibrary.com/gallery/api/random?callback=?', 
            function( data ) {
                $requests.append( '<li>' + data.modules[0].summary + "</li>" );
                $count.html( (total-limit) + " / " + total );
                if ( --limit ) {
                    setTimeout( run, 100);
                }         
            
        });
    };

$('button').click( function() {
       limit = 1;
       total += " (cancelled)"; 
});

run();