JSFiddle - React, Tailwind, and code Playground

by saurus

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<ul data-bind="foreach: items">
    <li data-bind="text: text"></li>
</ul>

        <button data-bind="click: LoadData">Refresh</button>
        
<div id="log">
    <p>log</p>
</div>

JavaScript

function log(s) {
    $('#log').append('<p>' + s + '</p>');
}

function Updater(dataIn, onEnd) {
    var count = 0;
    var requests = [];
    var data = [];
    var stopRequested = false;
    var start = function(dataIn) {
        addRequest("request " + dataIn + ".1");
        addRequest("request " + dataIn + ".2");
        addRequest("request " + dataIn + ".3");
        addRequest("request " + dataIn + ".4");
    };
    var addRequest = function(outData) {
        count++;
        var timeout = Math.floor(Math.random() * 5000);
        var t = setTimeout(function() {
            callback(outData);
        }, timeout);
        log("new request " + t + ", count = " + count + ", timeout = " + timeout + ", data = " + outData);
        requests.push(t);
    };
    var callback = function(newData) {
        if (!stopRequested) {
            log("callback with data = " + newData);
            data.push({
                text: newData
            });
            count--;
            if (count == 0) onEnd(data);
        }
        else log("STOPPED callback with data = " + newData);
    };
    this.abort = function() {
        stopRequested = true;
        log("ABORT!");
        for (var x in requests) {
            log("   cancel request " + x);
            clearTimeout(x);
        }
    };
    // fire up
    start(dataIn);
}
var vm = {
    items: ko.observableArray([{
        text: "initial data"}]),
    updater: null,
    id: 0,
    LoadData: function() {
        vm.id++;
        log('+++ LoadData');
        if (vm.updater != null) vm.updater.abort();
        vm.updater = new Updater(vm.id, function(newData) {
            vm.items(newData);
            vm.updater = null;
        });
        return false;
    }
};

ko.applyBindings(vm);