Question

我制作了自己的视频播放器，顶部有一个信息div，底部有一个播放栏div。

如果按下任何按钮，这些条纹应在5秒内消失，如果按下按钮，则应显示这些条形图（如果它们被隐藏）或停留5秒钟。

起初我想过这样的事情

  document.onkeyup = function(event) {
    showBar('playbarDiv');
    showBar('infoDiv');

    setTimeout(function() {
     hideBar(); 
    }, 5000);

    if (hideCounter !== 1){
     focusOn('playButton');
     hideCounter = 1;
    }

   };

但是当然每次按下一个按钮，你都会在队列中添加一个setTimeOut函数，所以在5秒后，条形图开始隐藏并显示。

我需要避免这种情况，例如＆＃34;重启＆＃34;当我按下按钮而不是＃34;加载＆＃34;时，SetTimeOut一个新的。

这是一个简单的例子：Demo

这可能吗？或者我需要使用与setTimeOut不同的东西？

提前致谢。

Answer 1

是的，您可以使用window.clearTimeout(yourTimeOutVariable)清除之前的超时。查看your demo, updated

您可以在此处详细了解http://www.w3schools.com/jsref/met_win_cleartimeout.asp

Answer 2

试试这个：

    jQuery(document).ready(function(){
  document.onkeyup = function(event) {

    if($("#content").not(":visible")){
        $("#content").fadeIn(500);
                setTimeout(function() { $("#content").fadeOut(500); }, 5000);

     };

  };
});

如果按下任何按钮，则自动隐藏div

2 个答案: