是否可以使用javascript中的异步方法进行迭代

Question

I have a JSP with a Struts 2 include:

<div id="data">
  <s:include value="list.jsp"/>
</div>

list.jsp has an iterator inside.

With JavaScript I have 3 functions that make an Ajax call to different actions and web services but the 3 functions refresh the same Java object list:

function firstCall(product) {
    // an ajax call 
    .done(function(html) {
      $("#data").append(html);
    });
}

function secondCall(product) {
    // an ajax call 
    .done(function(html) {
      $("#data").append(html);
    });
}

function thirdCall(product) {
    // an ajax call 
    .done(function(html) {
      $("#data").append(html);
    });
}

And i have another function that iterate a string array of products:

function iterate(productos){
    for(i=0;i<productos.length;i++){
        firstCall(productos[i]);
        secondCall(productos[i]);
        thirdCall(productos[i]);
    }
}

My problem is that I need these three methods to be asynchronous because each takes like 10 seconds. =(

There is a better way to do this?

Answer 1

If you do NOT care about older browsers (who doesn't support ES6) you can use promises. It would become

new Promise(firstCall(productos[i]));
new Promise(seccondCall(productos[i]));
new Promise(thirdCall(productos[i]));
//You can add .then(function(){"code"}) to do something after it's done.

And your methods should have two new parameters: resolve and reject, that are functions that resolve or reject the promise. So .then works.

If you care about older browsers you can use another implementation https://www.promisejs.org/ or see is there a way to implement promises in ie9+

See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise for reference