5 초 후 Javascript 기능 정지/5 초 후 .Blur() 설정

Question

.Blur()를 사용하여 5 초 후에 초점을 잃고 싶지만 setTimeout과 setInterval을 사용하면 코드 I에서 작동하지 않습니다. 내가 사용하고있어.

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

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>