How can I get my javascript function randomly select one function(slideshow), execute it, then repeat?

Question

I have a javascript code for replacing a html <div> that contains an image in it, so it becomes like a slide show. I have six of these slideshows on the page, and I need them to randomly change maybe switch image 3 then 6 then 2 and ect.

$(document).ready(function(){
     SlideShow6();
});

function SlideShow6() {
    $('#slideshow6 > div:gt(0)').hide();

    setInterval(function () {
        $('#slideshow6 > div:first')
        .fadeOut(0)
        .next()
        .fadeIn(0)
        .end()
        .appendTo('#slideshow6');
    }, 0000);
}

The time over here at the end is 0000 (0)seconds. Becuase I need the timer to have a 2000 (2)second pause before picking a random slide to slide. I tried my script with this:

var funcs = [];

funcs[0] = function() {
    $('#slideshow6 > div:gt(0)').hide();

    setInterval(function () {
        $('#slideshow6 > div:first')
        .fadeOut(0)
        .next()
        .fadeIn(0)
        .end()
        .appendTo('#slideshow6');
    }, 0000);
}
funcs[1] = function() {
    $('#slideshow5 > div:gt(0)').hide();

    setInterval(function () {
        $('#slideshow5 > div:first')
        .fadeOut(0)
        .next()
        .fadeIn(0)
        .end()
        .appendTo('#slideshow5');
    }, 0000);
}

// and so on six times... then...

$(document).ready(function(){
    var rand = parseInt(Math.random()*funcs.length);  
    funcs[rand]();
    setTimeout(arguments.callee, 2000);
});

It becomes really weird, it selects my functions randomly but it executes the slideshow a unlimited number of times and before soon all six of them are on and going. Maybe because of the 0000? I need them to switch image one by one.

----------UPDATE---------- I'm not sure if it was understandable from the code above but the SlideShow6 function repeats 6 times with a different funcs[1] number every time so that it can add slideshows for all 6 images into the funcs[] array.

I am a newbie to JavaScript but in words this is how I image the code:

Need to make an array so I put all these functions into into it

var funcs = [];
funcs[0] = function() {
    $('#slideshow1 > div:gt(0)').hide();

    setInterval(function () {
        $('#slideshow1 > div:first')
        .fadeOut(0)
        .next()
        .fadeIn(0)
        .end()
        .appendTo('#slideshow1');
    }, 0000);    
}
funcs[1] = function() {
**All the same except number slideshow1 changes to 2,3,4,5, and 6**
}
funcs[2] = function() {
}
funcs[3] = function() {
}
funcs[4] = function() {
}
funcs[5] = function() {
}

Then you need to call it up so make a math function that chooses 1-6 randomly which ever number is chosen then that functions is played out once. Then the randomize pick another number in 2 seconds. And another image slide changes. That's all it is every 2 seconds forever. Thanks.

0000 in setTimeout is saying "wait 0 milliseconds" aka don't wait. Might as well skip the setTimeout calls if you have a value of 0. — Matthew Herbst
– Matthew Herbst, Commented Jan 24, 2016 at 3:52
Hey @MatthewHerbst How can I cancel it? If I try removing the 0000 then it wont work at all. But I don't want to remove the 2000 I want it to randomly switch an image every 2 seconds. — Sammy7
– Sammy7, Commented Jan 24, 2016 at 3:55

Matthew Herbst · Accepted Answer · 2016-01-26 19:45:18Z

2

All testing done in Chrome console:

Setting the second parameter of setInterval to 0 causes the function to be run an unlimited number of time. I don't know why - I would expect the function to simply run a single time immediately.

You can see this in your console by doing:

setInterval(function () {
  console.log('Crazy');
}, 0000);

(There was a few iterations of this post which I have removed for brevity since they were deemed non-sufficient by question OP.)

Update 2:

var funcs = [];

funcs[0] = function() {
  $('#slideshow6 > div:gt(0)').hide();

  $('#slideshow6 > div:first')
    .fadeOut(0)
    .next()
    .fadeIn(0)
    .end()
    .appendTo('#slideshow6');
}

funcs[1] = ...;
funcs[2] = ...;
funcs[3] = ...;
funcs[4] = ...;
funcs[5] = ...;

$(document).ready(function() {
  window.setInterval(function() {
    var rand = Math.floor(Math.random() * funcs.length);
    funcs[rand]();
  }, 2000);
});

I think this is a much more elegant solution. What this does: loop forever. Every loop iteration, wait 2 seconds and then switch a random image.

edited Jan 26, 2016 at 19:45

answered Jan 24, 2016 at 17:24

Matthew Herbst

32.3k27 gold badges92 silver badges141 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Sammy7 Over a year ago

Thanks @Matthew Herbst but it won't exactly work like I wanted. It does select a random one but then every 2 seconds it slides just that one. I would like it to select a random one every 2 seconds and slide it once. But thanks anyway this is closer than I ever got on my own. I would appreciative if you could update your answer. Thanks Again.

Matthew Herbst Over a year ago

Every two seconds forever you mean?

Matthew Herbst Over a year ago

@user3263981 check out the update I just made. I think it will be what you're looking for.

Sammy7 Over a year ago

Unlike your first code, the second one didn't work at all. Please see my update.

Matthew Herbst Over a year ago

@Sammy7 AH! I wasn't thinking straight late last night. Infinite loops crash browsers! Look at the updated code (again). It will run forever every 2 seconds without crashing the browser or causing a StackOverflow.

|

Collectives™ on Stack Overflow

How can I get my javascript function randomly select one function(slideshow), execute it, then repeat?

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related