Home / Questions / 280898
Accepted
Nicolas Oñate
Asked: 2020-07-24 03:12:59 +0800 CST 2020-07-24 03:12:59 +0800 CST

How does when() work?

  • 772

I've looked at your API and this example but I don't quite understand its usage.

var def1 = $.Deferred();
var def2 = $.Deferred();
var def3 = $.Deferred();

var p1 = def1.promise();
var p2 = def2.promise();
var p3 = def3.promise();


$.when(p1, p2, p3).done(function(rs1, rs2, rs3) {
  LOG('When complete: '+rs1+', '+rs2+', '+rs3); // Results are in the order of the promises, regardless of the order they resolved in
});

def1.resolve('foo');
def3.resolve('bar');

setTimeout(function() {
  def2.resolve('AJAX!'); // No output is sent until this one returns
}, 2000);


function LOG(msg) {
  $('#log').append('<p>'+msg+'</p>');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="details">
  An example of using <tt>when()</tt> to wait for all promises
</div>
<div id="log"></div>

Does anyone know how it works?

jquery

1 Answers

  1. Best Answer

    As usual in jQuery, the behavior of the function whenvaries according to the parameters used, but in the case you propose it is the same as that of Promise.all:

    let p1= new Promise(function (resolver) {
  setTimeout(()=> resolver('medio segundo'), 500);
});
let p2= new Promise(function (resolver) {
  setTimeout(()=> resolver('1 segundo'), 1000);
});
let p3= new Promise(function (resolver) {
  setTimeout(()=> resolver('2 segundos'), 2000);
});

$.when(p1,p2,p3).then( (r1,r2,r3) => {
  console.log('Todo resuelto:',r1,r2,r3);
});
  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    That is, it groups promises together and creates a new promise that will resolve when all the grouped promises have resolved.

    This is useful, for example, when you need to make several calls AJAXand you need them all to complete before performing an action, but you don't want to chain them because they can be executed in parallel. In this way you save time and the code is cleaner:

    let peticion1 = $.ajax(....);
let peticion2 = $.ajax(...);

$.when(peticion1,peticion2).then(function (respuesta1,respuesta2) { ... });

    Its vanilla Javascript equivalent would be (note the square brackets, the parameters are grouped in a array):

    let peticion1=fetch(...);
let peticion2=fetch(...);

Promise.all([peticion1, peticion2]). then(function ([res1,res2]) => {...});
    • 4