Delay between while loop iterations

**Oakbard** · 02-03-2012 09:26 PM

Hi all,

I am trying to write a program to assist me in learning to play the piano. I have set up three buttons that will each call a function to randomly spit out chord names.
The problem I am having is that I want a 3 second delay within the while loop between chord names. I have looked around on the net and can't seem to see how to do it. Here is the code for the first function:

<html>
<head>
<script type="text/javascript">
MAJORS = new Array('A','B','C','D','E','F','G');
MINORS = new Array('Am','Bm','Cm','Dm','Em','Fm','Gm');
MIXED = new Array('A','B','C','D','E','F','G','Am','Bm','Cm','Dm','Em','Fm','Gm');
var iterations = 20;
var timeDelay = 3000;

function randomiseMajors(){
var i =0;
var rand;
while(i<iterations){
rand = parseInt(Math.floor(Math.random()*6));
//alert(rand);
document.writeln(MAJORS[rand]);
i++;
setTimeout(delay(),timeDelay);
}
}

function delay(){
}

</script>
</head>
<body>
<form>
<input type="button" value="Majors" onclick="randomiseMajors()" />
<p><input type="button" value="Minors" onclick="randomiseMinors()" /></p>
<p><input type="button" value="Mixed" onclick="randomiseMixed()" /></p>
</form>
</body>
</html>

Also, is it easy to display the chord names one at a time? ie when a new chord is displayed the previous one disappears. (This question is not so important I am more interested in the Timeout question).

Thanks for your help!

**007Julien** · 02-04-2012 04:04 AM

Try setTimeout(delay,timeDelay); without () and do not use document.write (or writeln) which is made for an open document and is not valid in a function called after the document is close. Use for example a div with a innerHTML

Code:

// replace this
document.writeln(MAJORS[rand]);
// by 
document getElementById('rsp').innerHTML+=MAJORS[rand];


// with a
<div id="rsp"></div>

**bionoid** · 02-04-2012 09:21 AM

Something similar to what you want to do?

Code:

<html>
	<head>
		<script type="text/javascript">

			var
				MAJORS = ['A','B','C','D','E','F','G'],
				MINORS = ['Am','Bm','Cm','Dm','Em','Fm','Gm'],
				MIXED  = ['A','B','C','D','E','F','G','Am','Bm','Cm','Dm','Em','Fm','Gm'],
				delay  = 3000;

			function randomiseKeys(keys)
			{
				var i = 0, e = document.getElementById('display');
				function next()
				{
					var html = '', c;
					for (c = 0; c < keys.length; c++) {html += '<span style="margin: 0 10px;' + (i === c ? 'text-decoration: underline;' : 'color: #888;') + '">' + keys[c] + '</span>';}
					if (i < keys.length) {e.innerHTML = html + '<div style="font-size: 144px;">' + keys[i++] + '</div>' + html;} else
					                     {e.innerHTML = ''; clearInterval(randomiseKeys.intID);}
				}
				keys.sort(function(){return Math.round(Math.random()) - 0.5;});
				if (randomiseKeys.intID) {clearInterval(randomiseKeys.intID);}
				randomiseKeys.intID = setInterval(next, delay);
				next(); //SHOW FIRST CHORD IMMEDIATELY
			}

		</script>
	</head>
	<body>
		<form>
			<input type="button" value="Majors" onclick="randomiseKeys(MAJORS);" />
			<input type="button" value="Minors" onclick="randomiseKeys(MINORS);" />
			<input type="button" value="Mixed"  onclick="randomiseKeys(MIXED);"  />
			<div id="display" style="text-align: center; margin-top: 50px;"></div>
		</form>
	</body>
</html>

Was fun

**Oakbard** · 02-04-2012 03:40 PM

Thanks for that advice Julien, it displays better now and I can run it more than once. The time delay between iterations still doesn't work but that doesn't matter because I am going to dissect Bionoid's code and see how he did the time delay and try and replicate that.

Thanks Bionoid, program works well. I am going to try and learn a few things from your code.

Thanks again

Thread: Delay between while loop iterations

Thread Tools

Display

Delay between while loop iterations

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions