JSFiddle - React, Tailwind, and code Playground

by _sir

HTML

<p>
    We can interrupt a Promise chain by returning a new Deferred object. When you return a new Deferred, the old one is no longer accessible.
</p>    
<div id="one"><h1>One</h1>
    <button class="succeed">Succeed</button>
    <button class="fail">Fail</button>
</div>
<div id="two"><h1>Two</h1>
    <button class="succeed">Succeed</button>
    <button class="fail">Fail</button>
</div>
<div id="three"><h1>Three</h1>
    <button class="succeed">Succeed</button>
    <button class="fail">Fail</button>
</div>
<div id="log"></div>

JavaScript

var myDef = {
    one: $.Deferred(),
    two: $.Deferred(),
    three: $.Deferred()
},
    $log = $('#log');

myDef.one.then(function(){
    $log.append('One!<br>');
    return myDef.two;
}).then(function(){
    $log.append('Two!<br>');
    return myDef.three;
},function(){
    // 
    $log.append('No Two.<br>');
    return myDef.three;
}).then(function(){
    $log.append('Three!<br>');
}).always(function(){
    $log.append('Finish<br>');
})

$('button').on('click',function(){
   var $t = $(this),
       p_id = $t.parent()[0].id,
       action = $t.hasClass("fail") ? false : true,
       def = myDef[p_id];
    
    if (action) {
        def.resolve();
    } else {
        def.reject();
    }
    
    $t.parent().hide();
    
});