# 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 < data.content.length; ++i) {
$('ol').append('<li>' + data.content[i]['content'] + '</li>'); }$("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.