javascript - 设置超时问题

Question

我正在处理的项目遇到问题。 我无论如何都不是 JS 专家，所以如果这是一个愚蠢的问题，我很抱歉。

我有 2 个视频，它们相互重叠。当我调用函数“switch”时，它会播放“静态”淡入淡出效果，然后切换两个视频的可见性。

一切都工作正常，但是当我单击按钮非常快地调用该函数时，“静态”效果就会出现问题，一切都开始出错。

这是我正在使用的代码。它切换类名称以隐藏视频。

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);
    }
}

setTimeout 是为了让“静态”淡入淡出有时间淡出一点，让事情看起来更平滑。

有没有其他方法可以让我把它放出来而不会出现故障？

Answer 1

试试这个:

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);
    }
}

这应该可以防止执行早期点击中开始的超时。