jQuery.Deferred test6

by mreis1

HTML

<ul></ul>

<a href="#">Modal</a>

CSS

ul{
    list-style-type:disc;
    margin:0 0 0 2em;
}
li{
    margin:0 0 .5em;
}

JavaScript

var modal_is_closed = false;

/* utils */
var $ul = $('ul');
function msg(text){
    $ul.append('<li>' + text + '</li>');
}

/* functions */
function asyncThing1(){
    var dfd = $.Deferred();
    setTimeout(function(){
        msg('asyncThing1 seems to be done...');
        dfd.resolve('banana');
    },1000);
    return dfd.promise();
}

function asyncThing2(){
    var dfd = $.Deferred();
    setTimeout(function(){
        msg('asyncThing2 seems to be done...');
        dfd.resolve('apple');
    },500);
    return dfd.promise();
}

function asyncThing3(){
    var dfd = $.Deferred();
    setTimeout(function(){
        msg('asyncThing3 seems to be done...');
        dfd.resolve('orange');
    },1500);
    return dfd.promise();
}


function asyncThing4(){
    var dfd = $.Deferred();

    var interval = setInterval(function(){
        console.log(modal_is_closed);
        if (modal_is_closed){

        msg('asyncThing4 seems to be done...');
        dfd.resolve('modal_closed');
                        clearInterval(interval);
        }
        
        
    },1500);
    
    
    
    return dfd.promise();
}


/* do it */
$.when( asyncThing1(), asyncThing2(), asyncThing3(), asyncThing4() ).done(function(res1, res2, res3, res4){
    msg('all done!');
    msg(res1 + ', ' + res2 + ', ' + res3+ ', ' + res4);
});

$('a').on('click', function(e){
    console.log( 'clicked' );
    modal_is_closed = true;
});