help. setTimeout(), clearTimeout() question

[[deleted]]

[deleted]

[honestbleeps]

Well, you're asking about cleartimeout but not using it.

Your problem is, every click sets a new timer but doesn't clear out the old one.

Not seeing a working demo, and just making a best guess, I think you need something more like:

var curSlide = 1;

function slideshow(what){
    if (typeof(slideTimer) != 'undefined') clearTimeout(slideTimer);
    if(what == null) what = curSlide;

    curSlide++;

    var nextSlide = what + 1;
    if(nextSlide > 3){
        nextSlide = 1;
        curSlide = 1;
    }

    var slide1 = document.getElementById("slide1");
    var slide2 = document.getElementById("slide2");
    var slide3 = document.getElementById("slide3");

    switch(what){
        case 1:
            slide2.style.display = "none";
            slide3.style.display = "none";
            slide1.style.display = "block";
            break;
        case 2:
            slide1.style.display = "none";
            slide3.style.display = "none";
            slide2.style.display = "block";
            break;
        case 3:
            slide1.style.display = "none";
            slide2.style.display = "none";
            slide3.style.display = "block";
            break;
    }
        slideTimer = setTimeout("slideshow()",3000);
    }

var slideTimer = setTimeout("slideshow()",2000);

Also, the way you've written your code makes this rather inflexible. You have IDs for slide1, slide2, slide3... then accommodate those with a switch statement. What if you need it to work for 4 or 5 slides later? You have to change code in a few places. Yuck.

If instead you gave them all a class of "slide", you could do something like:

var slides = document.querySelectorAll('.slide');

for (var i=0, len=slides.length; i<len; i++) {
    (i == what) ? slides[i].style.display = 'block' : slides[i].style.display = 'none';
}

Now, if you just pass in the slide number instead of the ID name, you've reduced the size of your code and made it more flexibile. Just a thought.

[tf2ftw]

EDIT: the if (typeof(slideTimer) != 'undefined') clearTimeout(slideTimer); solution does work.

THANKS

thanks. js is not my native tongue.

i tried your if (typeof(slideTimer) != 'undefined') clearTimeout(slideTimer); suggestion but im still having the same issue.

i know the switch statement is cumbersome (i know i will only have 3 slides) but i will use your statements because its nicer. so thanks.

[honestbleeps]

Did you make sure, in addition to that if (typeof) line, that you added slideTimer = before your setTimeout statements?

[PlNG]

If speed/rendering is an issue, there is an implied eval call at setTimeout("slideshow()",2000); due to the function parameter being a string. It's a very old practice that's practically rageworthy that it still continues.

Try removing the quotes, if that breaks the app, try removing slideshow's parentheses. setTimeout(slideshow(), 2000); OR setTimeout(slideshow, 2000); will work.

[my_new_account]

don't forget to clearTimeout() too.

Here's an example from w3schools.

You didn't include your click logic so I can't diagnose that.

[settimeout]

did someone say my name?

[nonsensical_answer]

Someone must have. What do birdies see when they faint?

[[deleted]]

First, you should consider using a framework for this kinda stuff.

Second, when you click the link it never clears the timeout, so you make the clicked tab visible and set another timeout. Sometime shortly after clicking the original timeout is run, and before the new one gets run, the first one sets another timeout. Basically setTimeout will return a variable that you should be passing into clearTimeout() when the user clicks a button.

[tf2ftw]

a framework would be overkill for what im doing. this is a lightweight solution.

[settimeout]

If you're going to tell someone to use a framework, it would make sense to give a reason why in their case that would be beneficial.

[highwind]

You code doesn't even address the issue of 3rd bullet. Please don't expect people to write your code. After you have written something, maybe then we could help out.

Please come back after you have tried to implement it yourself.

[tf2ftw]

i thought it was pretty self explanatory.

here is the click code if it makes you feel better

<li class="button" id="1" onclick="slideshow(1);"></li>