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

Question

I'm trying to get a button to lose focus after 5 seconds using .Blur() but using setTimeout and setInterval aren't working with the code I'm using.

I'm using VideoJS to get the time in the video, and between 1 and 10 seconds, the button with ID of 'butt6' should change to focused which is working.
The issue I'm experiencing is unfocusing after 5 seconds.

In the code, I have got between 1 and 10 seconds, and I've got the setTimeout set to 5 seconds to test whether it was working but it isn't and am currently relying on an elseif .blur() to lose focus after the 10 seconds is up.

I've scoured the internet trying to find someone else who may have had a similar issue but everything I've tried so far either doesn't focus the button or doesn't un-focus at all.

Code is below:

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

I believe the issue is that the if keep executing and focusing after the setTimeout. This should solve:

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

Thank you for your suggestion Tiago, and apologies for the delay in responding.
The 'setTimeout' didn't work unfortunately, but using .blur() I managed to take focus away from the buttons and formatted with pseudo classes in CSS for transition.

My final code is below for reference.

.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>