JSFiddle - React, Tailwind, and code Playground

by ThiefMaster

HTML

<button id="abort">Abort tasks</button>
<button id="start">Start task</button><br>
<textarea id="output"></textarea>

CSS

textarea { height: 25em; width: 100%; }

JavaScript

var aborted = $.Deferred();

function out(msg) {
    $('#output').val($('#output').val() + msg + '\n');
};

function abort() {
    aborted.reject();
    aborted = $.Deferred();
};

function abortCheck(dfd) {
    aborted.fail(function() {
        dfd.reject();
    });
    return dfd;
}

$('#abort').on('click', abort);

var taskId = 0;
$('#start').on('click', function() {
    var dfd = $.Deferred(),
        id = ++taskId;
    out('Task ' + id + ' started');
    window.setTimeout(function() {
        dfd.resolve();
    }, 5000);
    abortCheck(dfd).then(function() {
        out('Task ' + id + ' successful');
    }, function() {
        out('Task ' + id + ' failed');
    });
});