Javascript Time Delay

johnmerlino · 11-03-2009, 06:03 PM

Hey all, I have a couple of videos that display on web page. I want one to display 5 seconds after another when someone clicks a link. Now I know of the setTimeout method, but I can't seem to get it to work in this below code. The thing is both of the video elements are in the same function. Any help will be greatly appreciated:

Code:

<script type="text/javascript">
<!--
window.onload = initLinks;

var myVid = new Array("area2d.swf","Bar2D.swf", "Column3D.swf", "Column2D.swf");
var myFlash = new Array("data/Area2D.xml","data/Bar2D.xml", "data/Column3D.xml", "data/Column2D.xml");
var thisVid = 0;

function initLinks() {
	document.getElementById("vid1").onclick = processVid1;
	document.getElementById("vid2").onclick = processVid2;
	document.getElementById("vid3").onclick = processVid3;
	document.getElementById("prevLink").onclick = processPrevious;
	document.getElementById("nextLink").onclick = processNext;
}

function processVid1() {
	document.getElementById("myVideo").src = myVid[0];
	document.getElementById("myVideo").dataURL = myFlash[0];
	document.getElementById("myVideo2").src = myVid[1];
	document.getElementById("myVideo2").dataURL = myFlash[1];
	return false
}

function processVid2() {
	document.getElementById("myVideo").src = myVid[2];
	document.getElementById("myVideo").dataURL = myFlash[2];
	document.getElementById("myVideo2").src = myVid[3];
	document.getElementById("myVideo2").dataURL = myFlash[3];
	return false
}

function processVid3() {
	document.getElementById("myVideo").src = myVid[2];
	return false
}

function processPrevious() {
	if (thisVid == 0) {
		thisVid = myVid.length;
	}
	thisVid--;
	document.getElementById("myVideo").src = myVid[thisVid];
	return false;
}

function processNext() {
	thisVid++;
	if (thisVid == myVid.length) {
		thisVid = 0;
	}
	document.getElementById("myVideo").src = myVid[thisVid];
	return false;
}


-->
</script>


</head>

<body>

	<div id="slideshow">
		<h1>Introducing</h1>
<table width="">
<tr>
<td>
<embed src="area2d.swf" flashVars="&dataURL=data/Area2D.xml&debugMode=0&chartWidth=295&chartHeight=295" quality="high" width="295" height="295" type="application/x-shockwave-flash" allowScriptAccess="always" pluginspage="http://www.macromedia.com/go/getflashplayer" id="myVideo" />
      </embed>
<td
<td>
<embed src="Bar2D.swf" flashVars="&dataURL=data/Bar2D.xml&debugMode=0&chartWidth=295&chartHeight=295" quality="high" width="295" height="295" type="application/x-shockwave-flash" allowScriptAccess="always" pluginspage="http://www.macromedia.com/go/getflashplayer" id="myVideo2" />
      </embed>
<td
</tr>
</table>
	</div>


 
	<div id="pageTree">

	<ul>
	<li><a href="video1.html" id="vid1">Area</a></li>
	<li><a href="video2.html" id="vid2">Bar</a></li>
	<li><a href="video3.html" id="vid3">Inventory</a></li>
	</ul>
	</div>

	<div align="center">
	<h2><a href="previous.html" id="prevLink">&laquo; Previous</a>&nbsp;&nbsp;<a href="next.html" id="nextLink">Next &raquo;</a></h2>
	</div>

</body>

rnd me · 11-03-2009, 10:01 PM

i don't see any use of setTimeout in your code...

johnmerlino · 11-03-2009, 10:52 PM

But I want the element with an id of myVideo2 to appear 5 seconds after the element with an id of myVideo appears.

rnd me · 11-04-2009, 06:39 AM

ok, no problem. just delay the lines that dispatch.

for example:

Code:

	document.getElementById("myVideo").src = myVid[thisVid];

becomes:

Code:

	
window.setTimeout(function(){
   document.getElementById("myVideo").src = myVid[thisVid];
}, 5 * 1000);

you should be able to simply wrap the green text around whatever you want to delay.
you can change 5 to a different # of seconds if you need.