SetTimeOut problems

Question

I have a problem with a project i'm working on. I'm not in any way a JS expert so i'm sorry if this is a stupid thing to ask.

I have 2 video's that are on top of each other. when i call the function "switch" it plays a "static" fade effect and then switches the visability of both of the videos.

it all works fine, but when i click the button to call the function very fast, the "static" effect gliches out and everything starts to bug out.

here is the code that i am using. it switches the class name to hide the video.

function Switch(){
    if(videoNieuw.className == "show"){
        playNoise(1280, 720);
        btnswitch.className="controls now";
        setTimeout(function(){
            videoNieuw.className="hide";
            videoOud.className = "show";
        }, 500);

    }else if(videoOud.className = "show"){
        playNoise(1280, 720);
        btnswitch.className="controls then";
        setTimeout(function(){
            videoOud.className = "hide";
            videoNieuw.className="show";
        }, 500);
    }
}

The setTimeout is so the "static" fade has the time to fade a little bit and make things look smoother.

is there an alternative way so i can put this up without glitching?

possible typo }else if(videoOud.className = "show"){ - should be ==? — Kami
– Kami, Commented Jun 4, 2014 at 14:57

Cerbrus · Accepted Answer · 2014-06-04 14:38:48Z

1

Try this:

var timeOut;

function Switch(){
    clearTimeout(timeOut); // Stop the currently running timeouts, if any
    if(videoNieuw.className == "show"){
        playNoise(1280, 720);
        btnswitch.className="controls now";
        timeOut = setTimeout(function(){ // Store a reference to the new timeout
            videoNieuw.className="hide";
            videoOud.className = "show";
        }, 500);
    }else if(videoOud.className = "show"){
        playNoise(1280, 720);
        btnswitch.className="controls then";
        timeOut = setTimeout(function(){ // Store a reference to the new timeout
            videoOud.className = "hide";
            videoNieuw.className="show";
        }, 500);
    }
}

This should prevent timeouts started in earlier clicks from executing.

answered Jun 4, 2014 at 14:38

Cerbrus

73.3k19 gold badges138 silver badges151 bronze badges

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

Comments

JarCzeS · Accepted Answer · 2014-06-04 14:40:27Z

if i understand - lock switch when its doing and after finish unlock:

var lock = 0;
function Switch() {
    if(lock == 0) {
            lock = 1;
            if(videoNieuw.className == "show"){
                playNoise(1280, 720);
            btnswitch.className="controls now";
                setTimeout(function(){
                    videoNieuw.className="hide";
                    videoOud.className = "show";
                    lock = 0;
                    }, 500);

            }else if(videoOud.className = "show"){
                playNoise(1280, 720);
            btnswitch.className="controls then";

                setTimeout(function(){
                    videoOud.className = "hide";
                    videoNieuw.className="show";
                    lock = 0;
                    }, 500);
            }
     }
}

Collectives™ on Stack Overflow

SetTimeOut problems

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related