5秒后停止Javascript函数/5秒后设置.Blur（）

我正在尝试使用.Blur（）使按钮在5秒后失去焦点，但使用setTimeout和setInterval无法处理我正在使用的代码

我正在使用VideoJS获取视频中的时间，在1到10秒之间，ID为“butt6”的按钮应更改为正在工作的聚焦按钮。
我遇到的问题是5秒后没有聚焦

在代码中，我有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);

var myPlayer=document.getElementById（'my_video_1'）；
var myFunc=函数（）{
var，其中youat=myPlayer.currentTime；
如果（whereYouAt>1和whereYouAt 11）{
linkToFocus.blur（）；
}
myPlayer.addEventListener（'timeupdate'，myFunc，false）；

我认为问题在于

if

在

设置超时后继续执行并聚焦。这应该可以解决：

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

var myPlayer=document.getElementById（'my_video_1'）；
var hasFocus=false；
var myFunc=函数（）{
var，其中youat=myPlayer.currentTime；
如果（whereYouAt>1&&whereYouAt感谢您的建议，Tiago，并对延迟回复表示歉意。

不幸的是，“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>

.btn sq{
宽度：90px！重要；
高度：90px！重要；
字体大小：14px；
背景色：rgba（255255,1）；
保证金：5px；
颜色：#000；
空白：正常；
-o-过渡：颜色。2缓出，背景色。2缓入；
-ms过渡：颜色。2缓出，背景色。2缓入；
-moz过渡：颜色。2秒放松，背景色。2秒放松；
-webkit过渡：颜色。2放松，背景色。2放松；
过渡：颜色。2放松，背景色。2放松；
}
.btn sq：悬停{
宽度：90px！重要；
高度：90px！重要；
字体大小：14px；
背景色：#C10000；
保证金：5px；
颜色：#fff；
空白：正常；
-o-过渡：颜色。2缓出，背景色。2缓入；
-ms过渡：颜色。2缓出，背景色。2缓入；
-moz过渡：颜色。2秒放松，背景色。2秒放松；
-webkit过渡：颜色。2放松，背景色。2放松；
过渡：颜色。2放松，背景色。2放松；
}
.btn sq：焦点{
宽度：90px！重要；
高度：90px！重要；
字体大小：14px；
背景色：#C10000；
保证金：5px；
颜色：#fff；
空白：正常；
-o-过渡：颜色。2缓出，背景色。2缓入；
-ms过渡：颜色。2缓出，背景色。2缓入；
-moz过渡：颜色。2秒放松，背景色。2秒放松；
-webkit过渡：颜色。2放松，背景色。2放松；
过渡：颜色。2放松，背景色。2放松；
}       
var myPlayer=document.getElementById（'my_video_1'）；
var myFunc=函数（）{
var，其中youat=myPlayer.currentTime；
如果（whereYouAt>1和whereYouAt 11）{
var linkToFocus=document.getElementById（'butt1'）；
linkToFocus.blur（）；
}
}
myPlayer.addEventListener（'timeupdate'，myFunc，false）；
您是否尝试将焦点设置在另一个元素上以使其失去焦点？我有。原始代码通过4个按钮运行，每一个按钮在3秒的间隔后聚焦。理想情况下，我只想聚焦几秒钟，然后移除焦点。但是如果函数没有聚焦任何内容，则有多个if函数。
mPlayer.currentTime
看起来就像一个需要调用的方法。你想让按钮在第一次对焦后5秒模糊，然后再也不对焦，还是想让按钮在视频的前10秒对焦，并显示至少5秒？你的问题和代码示例相互矛盾。请澄清。对不起，我试图键入t当视频播放器达到某个特定时间时，我需要该按钮高亮显示，因为它将在视频中引用-我会在10秒钟内测试setTimeout是否工作，但需要该按钮最多聚焦5秒钟