Javascript:顺序，而不是并行

Question

我正在开发一个项目，但无法让我的 javascript 按顺序工作。我知道 javascript 可以并行执行任务，因此当您向不响应的服务器发出请求时，它不会被卡住。这有它的优点和缺点。就我而言，这是一种痛苦。

场景如下，我使用 Firebase 来存储有多少人同意某个观点。看起来如下:

我喜欢 JavaScript
- 我非常喜欢
- 我喜欢
- 喜欢也不喜欢
- 不喜欢
- 我基本上讨厌它

人们现在可以选择其中一个选项。然后将他们的选择记录放置在选项下方。结构:

-dfd21DeH67 : {
    Title : "I like javascript"
    options : {
        0 : {
            option : "I like it a lot"
            agrees : {
                -dfd21DQH6sq7 : "Jhon"
                -dfd21DQH6sq8 : "Luke"
                -dfd21DQH6sq9 : "Bruce"
            }
        }
        1 : {
            option : "I like it"
            agrees : {
                -dfd21DQH6sqA : "Harry"
                -dfd21DQH6sqB : "Jimmy"
            }
        }
        2 : {
            option : "like nor dislike it"
            agrees : {
                -dfd21DQH6sqC : "Timmy"
                -dfd21DQH6sqD : "Paul"
                -dfd21DQH6sqE : "Danny"
                -dfd21DQH6sqF : "Robin"
                -dfd21DQH6sqG : "Dan"
            }
        }
        3 : {
            option : "don't like it"
            agrees : {
                -dfd21DQH6sqH : "Nathan"
                -dfd21DQH6sqI : "Jerry"
            }
        }
        4 : {
            option : "I basically hate it"
            agrees : {
                -dfd21DQH6sqJ : "Tony"
            }
        }
    }
}

现在我想查询一下。我需要的每个选项的结果是:
- 选项(例如“我非常喜欢”)
- 同意计数(例如 n 人同意这一点)
- 百分比(例如，13 人中有 3 人说:“我喜欢 javascript”。这大约是 23%)

现在，获取“选项”并在浏览器中显示它:成功
获得“同意计数”:成功归功于 numChildren()
获取“百分比”:挑战，因为我需要将它们全部相加来计算。

关于如何实现这一目标有什么想法吗？尝试了一些回调技巧。可惜没有效果。以下是我的愿景:

//javascript
var hash = "-dfd21DeH67";
var fbDB = new Firebase("https://<MyDB>.firebaseio.com/");
var buffer = [];
var sum;

fbDB.child(hash).once("value", function(opinion) {
    var thisOpinion = opinion.val();

    // First section
    $.each(thisOpinion.options, function(i) {
        fbPoll.child(hash + "/options/" + i + "/agrees").once("value", function(agrees) {
            votes.push(agrees.numChildren());
            sum += agrees.numChildren();
        });
    });

    // execute only if the First section is done
    // this is currently not the case, this gets executed before
    // the first one finishes => result: #ResultsPanel stays empty
    $.each(buffer, function(i) {
        $("#ResultsPanel").append(
            "<div class=\"OptionStatsBlock\">" +
            "Option: " + thisOpinion.options[i].option + "<br>" +
            "Total: " + buffer[i] + "<br>" +
            "Percentage: " + ((buffer[i] / sum) * 100) +
            "</div>"
        );
    });
});

提前致谢，

Answer 1

正如评论中已经提到的:您似乎对 Firebase(以及大多数现代网络)的异步性质感到困惑。我鼓励您花尽可能多的时间来理解异步编程，以摆脱它当前造成的痛苦。它会防止你以后承受更多的痛苦。

一种可能的解决方案

Firebase DataSnapshot 始终包含您请求的节点下的所有数据。因此，您可以只请求更高一级的数据，然后循环并使用 child:

// First section
$.each(thisOpinion.options, function(i) {
    var agrees = opinion.child("/options/" + i + "/agrees");
    votes.push(agrees.numChildren());
    sum += agrees.numChildren();
});

此代码同步执行。

请注意，我没有对此进行测试，因此可能存在拼写错误。基本上只是对代码进行了轻微修改，使用 DataSnapshot.child:https://www.firebase.com/docs/web/api/datasnapshot/child.html