Javascript pause

[cuemasterfl]

I have a Javascript image rotator thingy, as shown in the code below. What I want, and am unable to get, is for the script to pause when a user mouses over one of the pics, and then resumes when the user mouses out. TIA!

<SCRIPT LANGUAGE="JavaScript">
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration = 4;
// Specify the image files
var Pic = new Array();
Pic[0] = 'images/1.jpg'
Pic[1] = 'images/2.jpg'
Pic[2] = 'images/3.jpg'
Pic[3] = 'images/4.jpg'
Pic[4] = 'images/5.jpg'
Pic[5] = 'images/6.jpg'



var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=4)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
//  End -->
</script>

 

[KevySaysBeNice]

I'm sure somebody much wiser then me will answer this much better, however as far as I know there is no "pause" function in javascript.

Instead, you need to use setTimeout() and split your method/function in half.

so you'd do:
function firstPart()
{
//do something that happens before the pause
setTimeout(secondPart(), 2000);
}

function secondPart()
{
//do the thing that happens after the pause.
}

hopefully that makes sense.

 

[william_fontaine]

Or, have a global variable that gets set to true on mouseover of the image, and false on mouseout. Then, in the runSlideShow() function, only perform the image change if that global variable == true. Seems a little ghetto, but I think it would work.

 

[cuemasterfl]

Thanks for the replies. I'll look at the suggestions when I get home from work tonight

 

[J-Will]

The easiest way would have a mouseover = true event and a separate one for when its false. That way the method will be called more than one, depending on when the mouseover boolean is changed/ set. The issue I foresee is that it might only call the action method once, either when the mose is on the pic, or when its removed from the pic. But never more than once, in real time.

I dont know what your loop would be, but you might have to nest the function call into a loop somehow.

 

[johnglenn]

You can use setTimeout and clearTimeout too. For example...

var timeoutId = 0;
function nextImage() {
  // blah blah
  timeoutId = setTimout(nextImage(), delay);
}

function imageMouseover() {
  clearTimeout(timeoutId);
}

function imageMouseout() {
  timeoutId = setTimeout(nextImage(), delay);
}