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/之類的庫進行請求緩存。