The code below fails because each time a button is pressed, it appears that the previous value lingers, but the duration of the individual image that was showing during the submission gets reduced a lot. (very unexpected behavior)

How do I make sure that the previous value clears and the new one takes it's place ?

How/Why is: window.setInterval( ) caching values ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<HEAD>
</HEAD>
<BODY>
<script language="JavaScript" type="text/JavaScript">
var banArray = new Array(8); //190 for banners, increase size as necessary
var flag=0;
var counter = 0;
var counter2 = 1;
banArray[0] = new Image();banArray[0].src = "images/image0.jpg";
banArray[1] = new Image();banArray[1].src = "images/image1.jpg";
banArray[2] = new Image();banArray[2].src = "images/image2.jpg";
banArray[3] = new Image();banArray[3].src = "images/image3.jpg";
banArray[4] = new Image();banArray[4].src = "images/image4.jpg";
banArray[5] = new Image();banArray[5].src = "images/image5.jpg";
banArray[6] = new Image();banArray[6].src = "images/image6.jpg";
banArray[7] = new Image();banArray[7].src = "images/image7.jpg";

function changeBanner() //banner changer function
{
if(counter > 6)//189
counter = 0;
if(counter2 > 7)
counter2 = 1;
document.banner.src = banArray[counter].src; //sets a new banner
document.banner2.src = banArray[counter2].src; //sets a new banner
counter=counter+2;
counter2=counter2+2;
}
function validateForm(theFlag)
{
var timer = window.setInterval("changeBanner()",0);
var timer = window.setInterval("changeBanner()",theFlag);
return true;
}
-->
</script>
<form name="myForm" action="Untitled6.htm" method="post" >
<img src="images/begin1.jpg" name="banner">
<img src="images/begin2.jpg" name="banner2">
<input type="button" name="submit" value="1000" onclick="validateForm(1000);"><br>
<input type="button" name="submit" value="3000" onclick="validateForm(3000);"><br>
<input type="button" name="submit" value="500" onclick="validateForm(500);">
</form>
</body>
</html>