Loading and displaying JSON quickly in PhoneGap app

Question

I have this tap event in an iOS app that I'm developing with PhoneGap. When I click on the left arrow, it finds the desired content and retrieves it from a JSON file. It then displays those results on the screen.

How can I improve this? There's a bit of lag... I know that some of the lag is attributed to the 300ms delay (which fastclick.js and other libraries could resolve), but what else can I do to restructure this code and make it more snappy? I need it to respond quickly.

// 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

Although I doubt it will make a big difference and help you much, but it would be more efficient to move operations out of the function whose input and output never change. Such as these:

• var path = window.location.href.replace('index.html', '');
• path + "data/heb-text/"

No need to execute these every time a tap is fired. You could execute these once, save the result in a variable, and use those variables inside the tap handler.

If the document structure doesn't change, then you could save processing time by caching these dom lookups too:

• $('.date')
• $('.title')
• $('ol')
• $("html, body")

Again, this might not make a big difference, but perhaps worth a shot anyway.