Остановить функцию Javascript через 5 секунд/установить .Blur() через 5 секунд

Question

Я пытаюсь получить кнопку, чтобы потерять фокус через 5 секунд, используя .Blur(), но используя setTimeout и setInterval не работают с кодом I используя.

Я использую VideoJS, чтобы получить время в видео, и от 1 до 10 секунд кнопка с идентификатором «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); 

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

Благодарим вас за предложение 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>