Tag Archives: jQuery

jQuery – Running Functions Every X Seconds

Another quick hack post. This time we will look at running some Javascript code, specifically jQuery, on a set interval to update code in a page. I had a request from a good buddy the other night to create something to flash a word at random from a list very fast as well as changing the background color as the word changed, also in a random manner. I figured we could do something quick, and universal, in javascript using the jQuery library.

This is a rather specific example, and one that does not seem that practical or programmatically important at that. However, the concept is universal in that we can easily adapt this theory to select a random image or call upon an AJAX function on a set interval. I find that these fun and prank-driven challenges usually present an opportunity to learn a new concept or come up with a creative new strategy to solve a problem while not under the stress of some real world problem.

In the following example, we will start with a default div and we will load it up with fresh content using setInterval(). The idea of the code is to use a list of words and randomly select a word from this list and display it in our empty div and repeat this on an interval of our choosing. To make it even more fun, or shall we more poignantly say, more annoying, we will use a second list of background colors and set the page background color by adjusting the CSS attribute for the body tag as we change the word displayed.

First, we will declare lists of words and colors:

words = ['word a','word b','word c','word d'];
backgroundColors = ['gray','yellow','blue','black','red'];

To select a word and color in a random fashion we will use Math:

var thisWord = words[Math.floor(Math.random() * words.length)];
var thisBackground = backgroundColors[Math.floor(Math.random() * backgroundColors.length)];

In order to make the actual changes we will use the css and text calls:

$("body").css('background',thisBackground);
$("#container").text(thisWord);

Finally, we will nest the random selections and change calls inside a setInterval function to run it in a timed loop, here every 200ms:

$(function() {
  setInterval(function() {
    var thisWord = words[Math.floor(Math.random() * words.length)];
    var thisBackground = backgroundColors[Math.floor(Math.random() * backgroundColors.length)];
    $("body").css('background',thisBackground);
    $("#container").text(thisWord);
  },200);
}

Now we have some jQuery code that will select a random word and background color from our provided lists and make those changes every 200ms. To put everything together, we use something like the code below.

<html> 
<head> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
<script type="text/javascript"> 
jQuery(document).ready(function($) {
words = ['word a','word b','word c','word d'];
backgroundColors = ['gray','yellow','blue','black','red'];
$(function() {
  setInterval(function() {
    var thisWord = words[Math.floor(Math.random() * words.length)];
    var thisBackground = backgroundColors[Math.floor(Math.random() * backgroundColors.length)];
    $("body").css('background',thisBackground);
    $("#container").text(thisWord);
  },200);
});
});
</script> 
<style> 
	body {
		margin: 0;
		padding: 0;
		background: black;
	}
	.container {
		width: 100%;
		margin: 0;
		padding: 0;	
	}
	#container {
		margin: 425px;
		padding: 0;
		color: white;
		font-size: 11em;
		font-family: impact, arial black;
		text-align: center;		
	}	
</style> 
</head> 
<body> 
<div class=container><p id=container>loading...</p></div> 
</body> 
</html> 

Try it out, it’s trippy!