Deferred example

by Laurens Maneschijn

HTML

delay1: <input type="range" min="0" max="3000" id="delay1" value="1000" /><span id="s1"></span><br/>
delay2: <input type="range" min="0" max="3000" id="delay2" value="2000" /><span id="s2"></span><br/>
<input type="button" value="go" id="go"/><br/>

status 1: <span id="status1"></span><br/>
status 2: <span id="status2"></span><br/>
status all: <span id="statusall"></span><br/>

<hr/>

sources:<br/>
<ul>
    <li><a href="https://api.jquery.com/category/deferred-object/">
        https://api.jquery.com/category/deferred-object/</a></li>
    <li><a href="https://api.jquery.com/jquery.when/">
        https://api.jquery.com/jquery.when/</a></li>
</ul>

JavaScript

var defer1,defer2,to1,to2;
$(document).ready(function(){
	
    $(document).on('change drag','input[type=range]', function(e){
        $(this).next('span').eq(0).text(this.value);
    });
    $('input[type=range]').trigger('change');
    $('#go').click(go);
});

function go(){
    $('#status1,#status2,#statusall').text('waiting...');
    
    var delay1 = $('#delay1').val(),
        delay2 = $('#delay2').val();
	defer1 = $.Deferred();
	defer2 = $.Deferred();
    defer1.done(function(){
        $('#status1').append('Done!');
    });
    defer2.done(function(){
        $('#status2').append('Done!');
    });
    $.when(defer1, defer2).then(function(){
        $('#statusall').append('Done!');
    });
    clearTimeout(to1);
    clearTimeout(to2);
	to1=setTimeout(function () { defer1.resolve(); }, delay1);
	to2=setTimeout(function () { defer2.resolve(); }, delay2);
}