Infinite javascript array using AJAX
Last Halloween I made a simple website that combines nouns with sexy adjectives to create Halloween costume ideas. Each refresh delivered a new idea. It occurred to me that I could load the suggestions asynchronously via a json api.
Here is the jQuery solution I came up with that allows the user to cycle through as many suggestions as they want without having to ever wait for an http request:
// Start with an empty array of suggestions
var suggestions = [];
// A function to append 10 suggestions to our array
function getSuggestions() {
$.getJSON("api.php?count=10", function (data) {
suggestions = suggestions.concat(data);
});
}
// Grab some suggestions right away
getSuggestions();
// Function to show a new suggestion, triggered by an `onClick` attribute
function refresh() {
// If we don't have any suggestions
if (suggestions.length == 0) {
// Wait, then try again, we are waiting on the ajax call
setTimeout(refresh, 100);
return;
}
suggestion = suggestions.pop();
// CODE TO UPDATE THE PAGE
// If we have fewer than five suggestions left, fetch some more
if (suggestions.length < 5) getSuggestions();
}
Check out the actual code on GitHub.