How to change div content based on timer

Question

Is there a way in jquery to change the contents of a div based on a timer.

Suppose I have a module to give “hints”. Tooltip content should change every 5 seconds.

thanks

Answer 1

Create an array of prompts. Then interval 5 seconds to change the contents of the div. I guess you need random hints.

See this example in jsFiddle.

 var tips = [ "Tip 01", "Tip 02", "Tip 03", "Tip 04", "Tip 05", "Tip 06", "Tip 07", "Tip 08", "Tip 09" ]; // get a random index, get the value from array and // change the div content setInterval(function() { var i = Math.round((Math.random()) * tips.length); if (i == tips.length) --i; $("#tip").html(tips[i]); }, 5 * 1000); 

Cm:

• setInterval
• jQuery selector
• jQuery html

Answer 2

javascript has a method called .setInterval() that will run code every n milliseconds.

 var $div = $('#myDiv'); var timer = setInterval( function() { $div.html( newContent ); // which would reference some dynamic content }, 5000); 

By .setInterval() return value of .setInterval() in a variable, you can stop the interval later with .clearInterval() .

 clearInterval( timer );