javascript - 在另一个回调函数的结果之前等待回调函数

Question

我的方法有问题。 elenco_prodotti 必须等待方法 sincro.query 继续添加最终输出，但现在我只看到空的 div，因为它需要同步。

请帮帮我!

this.elenco_prodotti = function (callBack) {
    var output = '';

    for (var c = 1; c < 5; c++ /*categoria*/)
    {
        for (var p = 1; p < 5; p++/*pagina*/)
        {
            output += "<div class='pag_" + p + " cat_" + c + "'>";

            var sql = 'SELECT cat_varianti,colore_tasto,id,descrizione,prezzo_1 FROM prodotti WHERE categoria="' + c + '" AND pagina="' + p + '"';

            output += '<div class="bs-docs-section btn_' + comanda.dispositivo + ' "> \n\
            <div class="bs-glyphicons"> \n\
             <ul class="bs-glyphicons-list">';

            for (var y = 1; y <= 6; y++) {
                for (var x = 1; x <= 8; x++) {

                    var posizione_attuale = y + "-" + x;
                    var testo_query = sql + ' AND posizione="' + posizione_attuale + '" LIMIT 1;';

                    comanda.sincro.query(testo_query, function (prodotto)
                    {
                        if (prodotto[0] && prodotto[0]['descrizione'].length > 0)
                        {
                            prodotto = prodotto[0];
                            prodotto['descrizione'] = prodotto['descrizione'].replace("'", " ");

                            switch (comanda.dispositivo) {
                                case "COMANDA":
                                    if (prodotto['descrizione']) {
                                        output += '<li style="background-color:' + prodotto['colore_tasto'] + '" onClick="aggiungi_articolo(\'' + prodotto['id'] + '\',\'' + prodotto['descrizione'] + '\',\'' + prodotto['prezzo_1'] + '&euro;\',\'null\',$(\'#quantita_articolo\').val(),\'null\',\'' + prodotto['cat_varianti'] + '\')"> \n\
                                                        <span  class="glyphicon-class">' + prodotto['descrizione'] + '<br/>€ ' + prodotto['prezzo_1'] + '</span> \n\
                                                            </li>';
                                    } else {
                                        output += '<li style="display:table;"> \n\
                                                         <span class="glyphicon" aria-hidden="true"></span> \n\
                                                                <span  class="glyphicon-class"></span> \n\
                                                                    </li>';
                                    }
                                    break;

                                case "LAYOUT TASTI":
                                    output += '<li ';

                                    if (prodotto['colore_tasto']) {
                                        output += 'style="background-color:' + prodotto['colore_tasto'] + '"';
                                    }
                                    output += ' onClick="modifica_articolo(\'' + c + '\',\'' + posizione_attuale + '\',\'' + prodotto['colore_tasto'] + '\');">  \n\
                                                    <span  class="glyphicon-class">' + prodotto['descrizione'] + '</span> \n\
                                                        </li>';

                                    break;

                                default:
                                    break;
                            }
                            output += '</ul></div></div>';
                        }
                        else
                        {
                            prodotto = null;
                        }
                    });
                }
            }
            output += '</div>';
        }
    }
    callBack(output);
};

Answer 1

你需要等待多个异步的事情发生。

目前，您的代码将无法工作，因为您是 capturing loop variables in a callback function这可能在循环完成后完成，这意味着您将拥有不可靠的 c 值, p , x , y .

你可以使用 Promises解决这个问题:

this.elenco_prodotti = function (callBack) {
    var promises=[];
    for (var c = 1; c < 5; c++ /*categoria*/)
    {
        for (var p = 1; p < 5; p++/*pagina*/)
        {
            var sql = //your sql;
            for (var y = 1; y <= 6; y++) {
                for (var x = 1; x <= 8; x++) {

                    var posizione_attuale = y + "-" + x;
                    var testo_query = //more sql;
                    var prom=new Promise(function(resolve,reject)){
                        var loopVars = {c:c,p:p,y:y,x:x};
                        comanda.sincro.query(testo_query, function (prodotto)
                        {
                            resolve({loopVars:loopVars,prodotto:prodotto})
                        });
                        promises.push(prom);
                    }
                }
            }
        }
    }
    Promise.all(promises).then(function(data){
        //this callback executes only when
        //all promises have completed...
        var output="";
        data.forEach(function(){item}{
            var c=item.loopVars.c;
            var p=item.loopVars.p;
            var x=item.loopVars.x;
            var y= item.loopVars.y;
            var prodotto=item.prodotto;
            //build your output string here
        });
        callBack(output);
    });
};