5 秒后停止 Javascript 函数/ 5 秒后设置 .Blur()

Question

我正在尝试使用 .Blur() 使按钮在 5 秒后失去焦点，但使用 setTimeout 和 setInterval 不适用于我正在使用的代码。

我正在使用 VideoJS 来获取视频中的时间，在 1 到 10 秒之间，ID 为 'butt6' 的按钮应该会变为聚焦状态，并且可以正常工作。
我遇到的问题是 5 秒后 unfocusing。

在代码中，我有 1 到 10 秒的时间，我将 setTimeout 设置为 5 秒以测试它是否正常工作，但实际上没有，我目前依赖于 elseif .blur( ) 在 10 秒后失去焦点。

我在互联网上搜索过，试图找到可能遇到过类似问题的其他人，但到目前为止我尝试过的所有操作要么没有聚焦按钮，要么根本没有取消聚焦。

代码如下：

var myPlayer = document.getElementById('my_video_1');
var myFunc = function(){
    var whereYouAt = myPlayer.currentTime; 
    if (whereYouAt > 1 && whereYouAt <= 10){
       var linkToFocus = document.getElementById('butt6');
       linkToFocus.focus();
       setTimeout(function(){ linktoFocus.blur(); }, 5000);
    }
    elseif (whereYouAt > 11){
    linkToFocus.blur();
}
myPlayer.addEventListener('timeupdate',myFunc,false);

Answer 1

我认为问题在于 if 在 setTimeout 之后继续执行和专注。这应该解决：

var myPlayer = document.getElementById('my_video_1');
var hasFocus = false;
var myFunc = function(){
    var whereYouAt = myPlayer.currentTime; 
    if (whereYouAt > 1 && whereYouAt <= 10 && !hasFocus){
       var linkToFocus = document.getElementById('butt6');
       linkToFocus.focus();
       hasFocus = true;
       setTimeout(function(){ linktoFocus.blur(); }, 5000);
    }
}
myPlayer.addEventListener('timeupdate',myFunc,false);

Answer 2

感谢蒂亚戈的建议，对于延迟回复深表歉意。
不幸的是，'setTimeout' 没有工作，但是使用 .blur() 我设法将焦点从按钮上移开，并在 CSS 中使用伪类进行格式化以进行过渡。

我的最终代码如下，供参考。

.btn-sq {
          width: 90px !important;
          height: 90px !important;
          font-size: 14px;
          background-color:rgba(255,255,255,1);
          margin: 5px;
          color:#000;
          white-space: normal;
          -o-transition:color .2s ease-out, background-color .2s ease-in;
          -ms-transition:color .2s ease-out, background-color .2s ease-in;
          -moz-transition:color .2s ease-out, background-color .2s ease-in;
          -webkit-transition:color .2s ease-out, background-color .2s ease-in;
          transition:color .2s ease-out, background-color .2s ease-in;

        }

        .btn-sq:hover {
          width: 90px !important;
          height: 90px !important;
          font-size: 14px;
          background-color:#C10000;
          margin: 5px;
          color:#fff;
          white-space: normal;
          -o-transition:color .2s ease-out, background-color .2s ease-in;
          -ms-transition:color .2s ease-out, background-color .2s ease-in;
          -moz-transition:color .2s ease-out, background-color .2s ease-in;
          -webkit-transition:color .2s ease-out, background-color .2s ease-in;
          transition:color .2s ease-out, background-color .2s ease-in;
        }

        .btn-sq:focus {
          width: 90px !important;
          height: 90px !important;
          font-size: 14px;
          background-color:#C10000;
          margin: 5px;
          color:#fff;
          white-space: normal;
          -o-transition:color .2s ease-out, background-color .2s ease-in;
          -ms-transition:color .2s ease-out, background-color .2s ease-in;
          -moz-transition:color .2s ease-out, background-color .2s ease-in;
          -webkit-transition:color .2s ease-out, background-color .2s ease-in;
          transition:color .2s ease-out, background-color .2s ease-in;
        }       


<script>
    var myPlayer = document.getElementById('my_video_1');
    var myFunc = function(){
        var whereYouAt = myPlayer.currentTime; 
        if (whereYouAt > 1 && whereYouAt <= 10){
           var linkToFocus = document.getElementById('butt1');
           linkToFocus.focus();
           setInterval(function(){ linktoFocus.blur(); }, 4000);
        }
        else if (whereYouAt > 11){
           var linkToFocus = document.getElementById('butt1');
           linkToFocus.blur();
        }
    }
    myPlayer.addEventListener('timeupdate',myFunc,false);
</script>

5 秒后停止 Javascript 函数/ 5 秒后设置 .Blur()

Stop Javascript function after 5 seconds/ set .Blur() after 5 seconds

javascript

jquery

video.js

twitter-bootstrap-3