Question

我对我正在进行的项目有疑问。我不是JS专家，所以如果这是一个愚蠢的事情，我很抱歉。

我有两个相互叠加的视频。当我打电话给功能＆＃34;切换＆＃34;它扮演一个静态的＆＃34;淡化效果，然后切换两个视频的可见性。

一切正常，但是当我点击按钮快速调用该功能时，＆＃34;静态＆＃34;效果会变得粗糙，一切都会开始出错。

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

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是＆＃34;静态＆＃34;褪色有时间褪色一点，让事情看起来更顺畅。

还有另一种方法，所以我可以毫无故障地提出这个问题吗？

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

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

Answer 2

如果我理解 - 锁定开关在完成时和完成解锁后：

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

SetTimeOut问题

2 个答案: