You don't need to clear cached data every 10 seconds; you just need to check whether the cached data is older than 10 seconds before showing it.
First, we need a place to save timestamps for each piece of cached data. Replace the first chunk of code with this:
$('.bbq').each(function () {
$(this).data('bbq', {
cache: {
// If url is '' (no fragment), display this div's content.
'': $(this).find('.bbq-default')
},
cacheTimes: {} // <-- this line is new (plus the comma above)
});
});
Then, when a hashchange
event occurs, we need the current time:
// Bind an event to window.onhashchange that, when the history state changes,
// iterates over all .bbq widgets, getting their appropriate url from the
// current state. If that .bbq widget's url has changed, display either our
// cached content or fetch new content to be displayed.
$(window).bind('hashchange', function (e) {
var now = (new Date()).getTime(); // <-- this line is new
// Iterate over all .bbq widgets.
$('.bbq').each(function () {
And for each widget, we check if enough time has elapsed to invalidate the cache:
// Get the url for this .bbq widget from the hash, based on the
// appropriate id property. In jQuery 1.4, you should use e.getState()
// instead of $.bbq.getState().
url = $.bbq.getState(that.attr('id')) || '';
// this chunk is new
if (url !== '' && now - (data.cacheTimes[url] || 0) > 10000) { // 10 seconds
data.url = null;
if (data.cache[url]) {
data.cache[url].remove();
data.cache[url] = null;
}
}
// If the url hasn't changed, do nothing and skip to the next .bbq widget.
if (data.url === url) { return; }
When fetching data, we remember the current time:
// Show "loading" content while AJAX content loads.
that.find('.bbq-loading').show();
data.cacheTimes[url] = now; // <-- this line is new
// Create container for this url's content and store a reference to it in
// the cache.
data.cache[url] = $('<div class="bbq-item"/>')