jQuery：如何改进此代码？

Question

我正在使用PhoneGap开发的iOS应用程序中有此点击事件。 当我单击左箭头时，它会找到所需的内容并从JSON文件中检索它。 然后，将这些结果显示在屏幕上。

我该如何改善？ 有点滞后...我知道有些滞后是由于300毫秒的延迟（fastclick.js和其他库可以解决的），但是我还能做些什么来重新构造此代码并使它更加生动？ 我需要它迅速做出反应。 谢谢！

// PREVIOUS DAYS
    $('.left-arrow').on("tap", function() {
        dateArrayIndex--;
        todaysDate = morehShiur[dateArrayIndex]['date'];
        todaysContent = morehShiur[dateArrayIndex]['description'];
        $('.date').text(todaysDate);
        var path = window.location.href.replace('index.html', '');
        $.getJSON(path + "data/heb-text/" + todaysContent, function(data) {
            $('.title').empty();
            $('ol').empty();
            $('.title').append(data['title']);
            for (var i = 0; i < data.content.length; ++i) {
                $('ol').append('<li>' + data.content[i]['content'] + '</li>');
            }
            $("html, body").animate({ scrollTop: 0 }, 0);
        });
    });

Answer 1

我同意您的滞后可能与进行ajax调用有关的评论。 但是，您可以对此代码执行一些操作，这些操作有可能会改善某些情况。

• 您可以像$('.date')那样限制或缓存选择器。 DOM查找非常昂贵。
• 您可以使用来选择多个项目,因此您的空白变为： $('.title, ol').empty()
• 您可以在内存中构建一次HTML， 然后将其附加到DOM，而不是在for循环中附加每次迭代。

作为最后一点的示例：

var $liArray = $('<div/>');
for (var i = 0; i < data.content.length; ++i) {
  $liArray.append('<li>Hello</li>');
}
$("ol").append($liArray);

Answer 2

您可以在客户端缓存服务器数据，以避免重复的服务器调用。 您还可以预取3天的数据（当前日期，上一个日期和下一个日期）。 因此，用户看不到当前日期的延迟。 但是在后台，您将要提取其他日期的数据。

您可以尝试使用http://amplifyjs.com/之类的库进行请求缓存。