Infinite javascript array using AJAX

Feb 9, 2014

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

// 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);
suggestion = suggestions.pop();


// If we have fewer than five suggestions left, fetch some more
if(suggestions.length < 5) getSuggestions();

Check out the actual code on GitHub.