如何在每个内部jQuery发布并在每个结束后使用结果

时间:2017-11-30 11:09:49

标签: javascript jquery

我有一些代码

function getSomeInfoFromDB() {
    let body = "";
    let text = "";
    $("tr").each(function (index) {
        let code = $(this).children("td:nth-child(2)");
        $.post("http://urltogetdatafromdatabase.com/getinfo.php", {a: code}).done(function (data) {
            text = "<dvi>" + index + " " + data + "</div>";
        });
        body = body + text;
    });

    let bigboody = "<div class='outer'>" + body + "</div>";
    doSomethingWithResult(bigboody);
}

但是doSomethingWithResult()总是在$ post返回数据之前工作 我该怎么做才能正常工作?

结果我需要

  <div class='outer'>
  <div> 1 data text from database</div>
  <div> 2 next text from database</div>
  </div>

3 个答案:

答案 0 :(得分:0)

您的done function是帖子的回拨函数。从服务器端接收数据后调用它。因此,doSomethingWithResult在您的done function之前呼叫您需要在回调中呼叫您的doSomethingWithResult功能

function getSomeInfoFromDB(){
    let body= "";
    let text = "";
    $("tr").each(function(index){
    let code = $(this).children("td:nth-child(2)");
    $.post( "http://urltogetdatafromdatabase.com/getinfo.php", { a: code     }).done(function( data ){
        text = "<dvi>"+index+" "+data+"</div>";
        let bigboody = "<div class='outer'>"+body+"</div>";
        doSomethingWithResult(bigboody);
    });
    body = body + text;
    });


}

答案 1 :(得分:0)

您必须在doSomethingWithResult()函数内移动done(),因为post()是异步的。

function getSomeInfoFromDB(){
  let body= "";
  let text = "";

  $("tr").each(function(){
    let code = $(this).children("td:nth-child(2)");
    $.post( "http://urltogetdatafromdatabase.com/getinfo.php", { a: code })
      .done(function(data) {
        text = "<div>"+data+"</div>";
        body = body + text;

        let bigboody = "<div class='outer'>"+body+"</div>";
        doSomethingWithResult(bigboody);
      });
    });
}

但请注意post()中的each(),它们可能会以不同的顺序返回,因为您要附加它们,可能不是您想要的。

更安全的方法(您可以控制顺序)是使用Promise.all()并将post()调用收集为promises并收集到数组中。像这样:

function getSomeInfoFromDB(){
  let promises = [];

  $("tr").each(function(){
    let code = $(this).children("td:nth-child(2)");
    promises.push(new Promise((resolve) => 
      $.post( "http://urltogetdatafromdatabase.com/getinfo.php", { a: code }).done(resolve)
    ))
  });

  Promise.all(promises)
    .then(datas => '<div>' + datas.join('</div><div>') + '</div>') // easy way to wrap all of them in divs and put them together
    .then(body => doSomethingWithResult('<div class="outer">' + body + '</div>');
}

基本上,您将每个post()打包为Promise并将Promise放入数组中。然后,使用Promise.all(),它将在所有承诺完成后运行。 then()将为您提供一系列结果,每个帖子按顺序排列一个。然后,您可以在那时随心所欲地做任何事情。

答案 2 :(得分:0)

如果您需要按顺序执行所有数据,那么您已经有了其他答案。

如果您不关心订单,但必须等到一切完成,您可以对来电进行计数并等到最后一次完成,就像这样

function getSomeInfoFromDB()
{
    let body = "";
    let text = "";
    var waiting=0;

    $("tr").each(function (index) {
        let code = $(this).children("td:nth-child(2)");
        waiting++;
        $.post("http://urltogetdatafromdatabase.com/getinfo.php", {a: code}).done(function (data) {
            text = "<dvi>" + index + " " + data + "</div>";
            waiting--;
            if (waiting==0)
            {
                let bigboody = "<div class='outer'>" + body + "</div>";
                doSomethingWithResult(bigboody);
            }

        });
        body = body + text;
    });
}