Блог

Главная - Вопросы по программированию - При втором запуске setTimeout моя фигура не отображается так, как в первый раз

При втором запуске setTimeout моя фигура не отображается так, как в первый раз

#javascript

#javascript

Вопрос:

Предполагается, что фигура появится через 1 секунду и запустит таймер. Предполагается, что фигура исчезает при щелчке и завершении таймера и отображает скорость реакции.

Еще через секунду фигура должна появиться снова и снова запустить таймер. Вот где код не работает. По щелчку фигура должна исчезнуть, завершить таймер и отобразить время реакции.

 <head>
    
 
        <title>Javascript</title>
        
        <style type="text/css">
            
            #shape{
                
                width:200px;
                height:200px;
                background-color: red;
                position:relative;
                visibility : hidden;
                
            }
        
        </style>
    
    </head>
 
    <body>
        
        
        <p id="Reactionline">Reaction time: <span id="reactionadded"></span></p>
        
        <hr style="margin-bottom: 5px; display:none;">
        
        <div id="shape"></div>
        
        
        <script>
            var start = new Date().getTime();
            
            function makeShapeAppear() {
                
                document.getElementById("shape").style.visibility = "visible";
                
                start= new Date().getTime();
                
            }
            
            
            function makeShapeDisappear() {
                document.getElementById('shape').onclick = function(){
                
                    document.getElementById('shape').style.visibility="hidden";
                    var end = new Date().getTime();
                    var time = (end - start)/1000   " seconds";
                    document.getElementById("reactionadded").innerHTML= time;
                
                }
            }
                       
            setTimeout(makeShapeAppear, 1000);
            makeShapeDisappear(); 
            setTimeout(makeShapeAppear, 1000);      
            makeShapeDisappear(); 
        </script>
        
        
    </body>

Комментарии:

1. Оба таймера истекают одновременно… Обратите внимание, что setTimeout это не останавливает выполнение остальной части вашего кода.

Ответ №1:

Вы должны поместить setTimeout(makeShapeAppear,1000) метод в makeShapeDisappear() функцию.

Ответ №2:

Вы движетесь в правильном направлении, но ваш подход к коду неверен. Вот один из правильных способов достижения того, что вы хотите сделать. Запустите фрагмент кода ниже

 let start = new Date().getTime();

document.getElementById('shape').onclick = function() {
  document.getElementById('shape').style.visibility = "hidden";
  var end = new Date().getTime();
  var time = (end - start) / 1000   " seconds";
  document.getElementById("reactionadded").innerHTML = time;
  makeShapeAppear();
}

function makeShapeAppear() {
  setTimeout(()=>{
   document.getElementById("shape").style.visibility = "visible";

  start = new Date().getTime();
  
  },1000);
}

makeShapeAppear();  
 #shape {
  width: 200px;
  height: 200px;
  background-color: red;
  position: relative;
  visibility: hidden;
}  
 <p id="Reactionline">
  Reaction time: <span id="reactionadded"></span>
</p>

<hr style="margin-bottom: 5px; display:none;">

<div id="shape"></div>

Ответ №3:

 var start = new Date().getTime();
    setTimeout(()=>{e.style.visibility="visible"}, 1000);
document.getElementById("shape").addEventListener('click',(e)=>{       
        e.style.visibility="hidden";
        var end = new Date().getTime();
        var time = (end - start)/1000   " seconds";
        document.getElementById("reactionadded").innerHTML= time;
        setTimeout(()=>{e.style.visibility="visible"}, 1000);
  
});

Ответ №4:

makeShapeDisappear устанавливает onclick кнопки, поэтому нет необходимости вызывать ее дважды, обратный вызов при нажатии должен вызываться при каждом нажатии кнопки.

просто добавьте

 setTimeout(makeShapeAppear, 1000);

в коде щелчка, чтобы он снова появился после того, как вы заставите его исчезнуть..
и вызовите ее один раз снаружи, чтобы она появилась для начала..

поскольку вы использовали settimeout так, как будто он «ожидает» — я просто упомяну, что вы могли бы сделать setTimeout ожидаемым, выполнив что-то вроде этого:

 async function wait(ms) {
  return new Promise(resolve => {
    setTimeout(resolve, ms);
  });
}

и тогда вы могли бы вызвать

 await wait(1000);

когда вы хотите, чтобы весь код «подождал» секунду..
хотя в этом случае вам это не понадобится

Ответ №5:

     <head>
    
 
        <title>Javascript</title>
        
        <style type="text/css">
            
            #shape{
                
                width:200px;
                height:200px;
                background-color: red;
                position:relative;
                visibility : hidden;
                
            }
        
        </style>
    
    </head>
 
    <body>
        
        
        <p id="Reactionline">Reaction time: <span id="reactionadded"></span></p>
        
        <hr style="margin-bottom: 5px; display:none;">
        
        <div id="shape"></div>
        
        
        <script>
            var start = new Date().getTime();
            
            function makeShapeAppear() {
                
                document.getElementById("shape").style.visibility = "visible";
                
                start= new Date().getTime();
                
            }
            
            
            function makeShapeDisappear() {
                document.getElementById('shape').onclick = function(){
                
                    document.getElementById('shape').style.visibility="hidden";
                    var end = new Date().getTime();
                    var time = (end - start)/1000   " seconds";
                    document.getElementById("reactionadded").innerHTML= time;
                  
                  
                    setTimeout(makeShapeAppear, 1000);      
                    makeShapeDisappear(); 
                
                }
            }
                       
            setTimeout(makeShapeAppear, 1000);
            makeShapeDisappear(); 
        </script>
        
        
    </body>