javascript - jQuery:如何改善此代码？

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

我该如何改善？有点滞后...我知道有些滞后归因于300ms的延迟（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);
        });
    });

最佳答案

我同意这样的评论，即您的滞后可能与进行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);