文本未按正确的顺序显示

问题是，当你使用 $.getJSON() 获得更多数据时，你使用的是异步的 AJAX。这意味着脚本不会停止等待调用完成，而是继续执行。由于从服务器检索数据时存在延迟，但会立即打印分隔符，因此数据始终在分隔符之后打印。

一个简单的解决方法是为主循环中的数据保留容器，这样 AJAX 调用何时完成就无关紧要了。

function getAllLogs(emId) {
    $.getJSON('datafile.json', function(data) {
        var $emId = $( '#' + emId );  // cache the main container
        $("#" + emId).html("All logs:<br>");
        var firstDateDisplayed = false;
        $.each(data, function(index, value) {
            //Only displays dates once, then all log sheets for that date
            if (firstDateDisplayed === false ||
                data[index-1].log_sheet.time !== value.log_sheet.time) {
                $emId.append("<br>----------------<br>");
                // create a container for the date and have getLogDate() fill it later
                $emId.append( '<div id="'+emId+'Date'+index+'"></div>' );
                getLogDate(emId+'Date'+index, index);
                firstDateDisplayed = true;
            }
            // do the same to the rest of the functions as we did above for getLogDate()
            $emId.append( '<div id="'+emId+'Time'+index+'"></div>' );
            $emId.append( '<div id="'+emId+'Data'+index+'"></div>' );
            getLogTime(emId+'Time'+index, index);
            getLogData(emId+'Data'+index, index);
        });
    });
}

所以基本上你想做的是在有一个新的日期外观时输入----？

var json = [
{
    "log_sheet": {
        "data":"4",
        "date":"2012-07-27T00:00:00-06:00",
        "time":"2000-01-01T02:15:00Z",
        "more_data":"7"
    }
},
{
    "log_sheet": {
        "data":"4",
        "date":"2012-07-27T00:00:00-06:00",
        "time":"2000-01-01T02:15:00Z",
        "more_data":"7"
    }
},
{
    "log_sheet": {
        "data":"4",
        "date":"2012-07-27T00:00:00-06:00",
        "time":"2000-01-01T02:15:00Z",
        "more_data":"7"
    }
},
{
    "log_sheet": {
        "data":"4",
        "date":"2012-07-27T00:00:00-06:00",
        "time":"2000-01-01T02:17:00Z",
        "more_data":"7"
    }
}
];

console.log("All logs:");
$.each(json, function(index, value) {
  if(index == 0 || (index > 0 && json[index-1].log_sheet.time !== value.log_sheet.time))
  {
   console.log("-----------");
  }
  console.log("Date " + index + ": " + value.log_sheet.date);
  console.log("Time " + index + ": " + value.log_sheet.time);
  console.log("Data " + index + ": " + value.log_sheet.data);
});

结果：

All logs:
-----------
Date 0: 2012-07-27T00:00:00-06:00
Time 0: 2000-01-01T02:15:00Z
Data 0: 4
Date 1: 2012-07-27T00:00:00-06:00
Time 1: 2000-01-01T02:15:00Z
Data 1: 4
Date 2: 2012-07-27T00:00:00-06:00
Time 2: 2000-01-01T02:15:00Z
Data 2: 4
-----------
Date 3: 2012-07-27T00:00:00-06:00
Time 3: 2000-01-01T02:17:00Z
Data 3: 4

因此，重写的函数将如下所示：

function getAllLogs(emId) {
    $.getJSON('datafile.json', function(data) {
        var $output = $("#" + emId);
        $output.html("All logs:<br>");
        $.each(data, function(index, value) {
            //Only displays dates once, then all log sheets for that date
            if(index == 0 || (index > 0 && json[index-1].log_sheet.time !== value.log_sheet.time))
            {
                $output.append("<br>----------------<br>");
                //Formats and appends date to a paragraph
                //getLogDate(emId, index);
                $output.append("Date " + index + ": " + value.log_sheet.time +"<br/>");
            }
            //Formats and appends time to a paragraph
            //getLogTime(emId, index);
            $output.append("Time " + index + ": " + value.log_sheet.time +"<br/>");
            //Formats and appends all data to a paragraph
            //getLogData(emId, index);
            $output.append("Data " + index + ": " + value.log_sheet.data +"<br/>");
        });
    });
}

从我从您的帖子中收集到的信息来看，您实际上是按date属性对data和time的日志进行分组。如果这是演员表，你可以尝试这样的东西：

function getAllLogs(elementId)
{
    $.getJSON('datafile.json', function(data)
    {
        var logElement = $('#' + elementId).append('All logs:<br />');
        var lastLogDateDisplayed = null;
        $.each(data, function(index, value)
        {
            // check if we've reached another date
            if (lastLogDateDisplayed != value.log_sheet.date)
            {
                // update the last shown date, and select its html
                lastLogDateDisplayed = value.log_sheet.date;
                logElement.append('----------------<br />');
                    .append(getLogDate(value));
            }
            // select the time and data as html strings
            logElement.append(getLogTime(value))
                .append(getLogData(value));
        });
    });
}

这里有一些值得注意的明确改进。首先，我们只选择一次elementId元素。这将我们的选择器的性能从之前的 1 + 4n 命中率提高到 1 .此外，因此，getLogDate、getLogTime和getLogData不接受value（即当前日志项），并返回一个 dom 或 jQuery 对象以附加到日志元素本身。

这是一些更改，但它更干净，希望能帮助解决您的问题。