Node.js EventLoop 操作未完成？

Question

这涉及一个带有 AJAX 调用的 Node/Express/MongoDB 应用程序

由于某种原因，selector.html() 事件正在替换 选择器，但现在不是。

唯一的变化是在后端引入了editAll() 函数，它将MongoDB 数据传递到.get，在通过ajax 将其传递到前端之前进行一些计算。

而不是浏览器控制台写 GET http://localhost:9999/ 和每个 btn.click

[13:47:57.240] GET http://localhost:9999/ [HTTP/1.1 200 OK 5ms]
[13:47:57.174] "Getting All Actions"
[13:47:57.192] "value of action with index 0 = 4"
[13:47:57.193] "value of action with index 1 = 8"
[13:47:57.193] "value of action with index 2 = 9"
[13:48:03.704] GET http://localhost:9999/ [HTTP/1.1 200 OK 7ms]
[13:48:03.640] "Getting All Actions"
[13:48:03.661] "value of action with index 0 = 4"
[13:48:03.661] "value of action with index 1 = 8"
[13:48:03.661] "value of action with index 2 = 9"

.. 控制台为出现在前端的一组重复 div 写入一整套“响应”

[13:29:24.244] GET http://localhost:9999/ [HTTP/1.1 200 OK 5ms]
[13:29:24.182] "Getting All Actions"
[13:29:24.197] "value of doc with index 0 = 24"
[13:29:24.197] "value of doc with index 1 = 28"
[13:29:24.197] "value of doc with index 2 = 29"
...
[13:29:24.198] "value of doc with index 6 = 24"
[13:29:24.198] "value of doc with index 7 = 28"
[13:29:24.199] "value of doc with index 8 = 29"

据我所知，后端运行良好，因为唯一的 3 docs in the db 被传递给 eventAll() 函数，该函数再次提供相同的 3 docs。

function getAll(res) {

    db.collection('demo').find().sort( { value: 1 } ).toArray(function (err, docs) {
        console.log("Got the docs: " + utils.inspect(docs));

        //res.json({docs: docs}); THIS WORKS PERFECTLY,
                                  but the eventAll() pass causes this frontend issue

            /* pass and rebuild the data array before we 'json' it */
        var editedDocs = editAll(docs); 
        res.json({docs: editedDocs});

    });
}

调用editAll()函数传递数据，是eventloop操作没有结束还是怎么回事？

function editAll(allDocs) {
  var returnedValue = [];
  for (var i=0, len=allDocs.length; i < len; ++i){
      //does some calculations
    var newVal = {_id:allDocs[i]._id,title:allDocs[i].title,value:allDocs[i].value};
    returnedValue.push(newVal);
  }
  console.log(returnedValue);
  return (returnedValue);
}

为什么每个btn.click 都会向#result 添加另一组div

这是通过 gotAllSuccess 在 btn.click 上构建一些 html 的 ajax .get 调用

$('#getBtn').click(function() {
  console.log('Getting All');
  $.get('http://localhost:9999').
   done(gotAllSuccess).
   fail(gotAllFailure);
});

function gotAllSuccess(result){

  var docs = result.docs;
  var html = '';
  var doc;
  for (var i=0, len=docs.length; i < len; i++){
    doc = docs[i];
        console.log("value of doc with index " + i + " = " + doc.value);
    html += "<div class='rResult' id='rResult" + i + "'>"+doc.title+"</div><br>";
  }
  $('#result').html(html);
}

Answer 1

基本上，您的代码没有问题，并且必须按预期工作。 我建议您在将其写入响应之前检查逻辑并记录 editedDocs 值。

您的查询结果似乎以某种方式被缓冲。

您可以如下重写editAll 函数（以消除循环和所有附加变量，以及所有可能的副作用）：

function editAll(allDocs) {
    return allDocs.map(function(it){
        return { 
            _id:it._id,
            title:it.title,
            value:it.value 
        }
    })
}