setting a random time interval for a slideshow?

[newsteve1]

hi,

this should be simple but its stumping me,

I am trying to make a slideshow that pulls random images at a random time interval (between 1 and 4 seconds). The images part works fine, and I can get the time function to create a random number, but that number doesnt change throughout the duration of the slideshow. I would like the duration to reset itself and changefor every picture that is displayed. Here is my code:

function allPlantPick(){
 
    setInterval("plantPick('plant1')", plantTimer());
 
}
 
function plantTimer() {
 
    var plantNum = (Math.random()*4000) + 1000;
    return(plantNum);
 
}
 
//this function works fine:
function plantPick(myFoo){
 
 var plantChoices=["images/p1.jpg","images/p2.jpg","images/p3.jpg"];
 
 document.getElementById(myFoo).style.backgroundImage = "url(" + plantChoices[ Math.floor(Math.random()*plantChoices.length) ] + ")";
}

[pbmods]

Heya, Steve.

Instead of setInterval(), use setTimeout():

function allPlantPick(){
 
    setTimeout(
        function()
        {
            plantPick('plant1');
            allPlantPick();
        },
        plantTimer()
    );
}
 

[newsteve1]

Hey thanks for the prompt reply,

It worked perfect. However, I forgot to mention that I want to have this random slideshow functioning simultaneously in 3 separate divs that are side by side. Each div will have random pictures and random timing. I naturally just multiplied your code by 3 and stuck it all into allPlantPick, but when I tested it, it created this crazy situation where the random timing kept speeding up until it crashed firefox! It was cool but not what I wanted. Should I be calling 3 separate functions instead of just lumping them into one??? Heres what I did:

function allPlantPick(){
          setTimeout(
              function()
              {
                  plantPick('plant1');
                  allPlantPick();
              },
              plantTimer()
          );
          setTimeout(
              function()
              {
                  plantPick('plant2');
                  allPlantPick();
              },
              plantTimer()
          );
          setTimeout(
              function()
              {
                  plantPick('plant3');
                  allPlantPick();
              },
              plantTimer()
          );
      }
 
function plantTimer() {
 
    var plantNum = (Math.random()*4000) + 1000;
 
    return(plantNum);
 
}
 
//this function works fine:
 
function plantPick(myFoo){
 
 var plantChoices=["images/p1.jpg","images/p2.jpg","images/p3.jpg"];
 
 document.getElementById(myFoo).style.backgroundIma  ge = "url(" + plantChoices[ Math.floor(Math.random()*plantChoices.length) ] + ")";
 

[newsteve1]

No worries, I just put it in three separate functions and called those three separate functions and it all worked out... i am curious as to why the slide show kept speeding up though...?

Thanks again for your help,

Steve

[pbmods]

Heya, Steve.

The reason why the timer keeps speeding up is because allPlantPick() sets up 3 timers... and *each* of those timers calls allPlantPick()... which sets up *3* more timers!

Perhaps you can see how that would be a problem... :P

Instead, consider doing this:

function allPlantPick(plantId)
{
    setTimeout(
              function()
              {
                  plantPick(plantId);
                  allPlantPick(plantId);
              },
              plantTimer()
          );
}
 
for(var i = 1; i < 4; ++i)
{
    allPlantPick('plant' + i);
}
 

[newsteve1]

ok, i get it now. and your script works totally.
not that you havent helped me out enough already, but im looking to put a user controlled stop/start option with an onclick applied to each image...

this is what i have so far... i was thinking i would throw the entire set interval into a variable (startStop), but again its tricky with 3 separate slideshows:

var q = 1;
 
function pStopGo() {
 
    if (q == 1) {
        stopPlant();
        q = 2;
    }
    else if (q == 2) {
        goPlant();
        q = 1;
    }
 
function stopPlant(){
    window.clearTimeout(startStop);
}
 
function goPlant(){
    allPlantPick();
}
 
} 

[pbmods]

Heya, Steve.

Given that you will always have three separate timeouts going at the same time, you can store each one inside of a global variable:

var activeTransitions = {};
 
function allPlantPick(plantId)
{
    activeTransitions[plantId] = setTimeout(
              function()
              {
                  plantPick(plantId);
                  allPlantPick(plantId);
              },
              plantTimer()
          );
}
 

So to stop a particular timeout from firing:

clearTimeout(activeTransitions['plant2'];
 

Or to stop all three:

for(plantid in activeTransitions)
{
    clearTimeout(activeTransitions[plantid];
}