javascript - 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);