Loading and displaying JSON quickly in PhoneGap app 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 &lt; data.content.length; ++i) {
                $('ol').append('&lt;li&gt;' + data.content[i]['content'] + '&lt;/li&gt;');
            }
            $("html, body").animate({ scrollTop: 0 }, 0);
        });
    });
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.