SetTimeout slideshow loop issue

Question

I have programmed the following function, that allows me to call and create a simple slideshow on this page: http://www.ideacycling.com/html/portfolio.htm

        function show_slideshow(slide1, slide2, slide3){

            var timer, slide_no=1;

            function change_slide(){
                clearTimeout(timer); // tiden udloeb jo, så vi sætter den til 0 igen.
                switch(slide_no){
                    case 1: 
                        $("#nedrehoejre").toggleClass(slide1);
                        slide_no=2;
                        break;
                    case 2: 
                        $("#nedrehoejre").toggleClass(slide2);
                        slide_no=3;
                        break;
                    case 3: 
                        $("#nedrehoejre").toggleClass(slide3);
                        slide_no=1;
                        break;
                }
                timer = setTimeout(change_slide, 3500); //
            }
            change_slide();

        };

After the third slide only the background is shown for a short time, before restarting the slideshow. (Background turns blue)

How can this be?

And how do I work around it?

Thanks in advance.

`timer = setTimeout(change_slide, 3500); //` due to this after the third slide you are waiting for timeout & because of that blue screen appears before slider starts again. — Sorangwala Abbasali, Jan 21 '17 at 09:48
Except that problem, you have big pause on the third slide (btw, all classes are present when third slide arrives), and i am not sure that it is intention... check generated html, it should help you to solve problem. — sinisake, Jan 21 '17 at 09:58

score 3 · Accepted Answer · edited May 23 '17 at 10:29

.toggleClass() is not working as you think. It allows you to toggle given class selected DOM elements. It doesn't affect other classes on elements.

In your case, consecutive calls of toggleClass() results in problematic class values as follows.

flex_indhold lightblaa bmx1
flex_indhold lightblaa bmx1 bmx2
flex_indhold lightblaa bmx1 bmx2 bmx3
flex_indhold lightblaa bmx2 bmx3
flex_indhold lightblaa bmx3
flex_indhold lightblaa

So it's not working as you want at step 6. You should clear other bmx_ classes before adding new one.

$("#nedrehoejre").removeClass('bmx1 bmx2 bmx3');

Also I suggest you to read comments on this post.

function show_slideshow(slide1, slide2, slide3){

            var timer, slide_no=1;

            function change_slide(){
                clearTimeout(timer); 
                $("#nedrehoejre").removeClass('bmx1 bmx2 bmx3');
                // or $("#nedrehoejre").removeClass(slide1 + ' ' + slide2 + ' ' + slide3);
                switch(slide_no){
                    case 1: 
                        $("#nedrehoejre").toggleClass(slide1);
                        slide_no=2;
                        break;
                    case 2: 
                        $("#nedrehoejre").toggleClass(slide2);
                        slide_no=3;
                        break;
                    case 3: 
                        $("#nedrehoejre").toggleClass(slide3);
                        slide_no=1;
                        change_slide();
                        break;
                }
                timer = setTimeout(change_slide, 3500); //
            }
            change_slide();

        };

Very helpful, I just realized the toggle class issue, when toggle multiple different classes. Thank you! — Ktraving, Jan 21 '17 at 10:18
Thank you, too. Also I have some suggestions for you. Try to use setInterval instead of setTimeout. Also does not provide "class" names as parameter. Use array of classes and pointer for that. In this case you won't need to use "switch-case" statement. — Tuğca Eker, Jan 21 '17 at 10:20

score -2 · Answer 2 · answered Jan 21 '17 at 09:51

timer = setTimeout(change_slide, 3500); // due to this after the third slide you are waiting for timeout & because of that blue screen appears before slider starts again.

I suggest to call change_slide() on case three to loop it all over again without waiting for timeout. Change this way:

 function show_slideshow(slide1, slide2, slide3){

            var timer, slide_no=1;

            function change_slide(){
                clearTimeout(timer); // tiden udloeb jo, så vi sætter den til 0 igen.
                switch(slide_no){
                    case 1: 
                        $("#nedrehoejre").toggleClass(slide1);
                        slide_no=2;
                        break;
                    case 2: 
                        $("#nedrehoejre").toggleClass(slide2);
                        slide_no=3;
                        break;
                    case 3: 
                        $("#nedrehoejre").toggleClass(slide3);
                        slide_no=1;
                        change_slide();
                        break;
                }
                timer = setTimeout(change_slide, 3500); //
            }
            change_slide();

        };

SetTimeout slideshow loop issue

2 Answers2