在JavaScript中如何解決要素的顯示和變量

我想衡量一個盒子aparition和包裝盒上的用戶點擊的時間之間的時間創作之間的初始差，所以我做了這個：在JavaScript中如何解決要素的顯示和變量

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>JavaScript</title> 
 
    <style type="text/css"> 
 
    body{ 
 
    background: gray; 
 
    } 
 
    #box{ 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
    visibility: "hidden"; 
 
    } 
 
    </style> 
 
    <script type="text/javascript"> 
 
    window.onload = function(){ 
 
     var clickedTime; //to store the time when the box is clicked 
 
     var createdTime; //to store the time when the box is created 
 
     var reactionTime; //secs between the box creation and box click 
 

 
     function appear(){ 
 
     //this function is to make the box appear 
 
     setTimeout(function(){ 
 
      document.getElementById("box").style.visibility = "visible"; 
 
      createdTime = Date.now(); 
 
      console.log("createdTime: "+createdTime); 
 
     }, Math.random()*5000); 
 
     } 
 
     document.getElementById("box").onclick = function(){ 
 
     //this is to hide the box, make it appear and calculate the reaction time 
 
     clickedTime = Date.now(); 
 
     console.log("clickedTime: "+clickedTime); 
 
     reactionTime = (clickedTime - createdTime)/1000; 
 
     console.log("reactionTime: "+reactionTime); 
 
     alert(reactionTime); 
 
     this.style.visibility = "hidden"; 
 
     appear(); 
 
     } 
 
     appear(); 
 
    } 
 
    </script> 
 
</head> 
 
<body> 
 
<div id="box"></div> 
 
</body> 
 
</html>

當用戶點擊框快速之初，在這一點上顯示與南警報和控制檯日誌顯示的問題發生：

clickedTime：1428200428320
reactionTime：NaN的

通過在這點簡單的觀察沒有在createdTime變量沒有內容，即使框設置爲可見時，函數出現（）被調用，這函數還爲變量createdTime分配一個值。還有一點是，即使設置了超時時間，該框也會顯示得非常快，該框會在隨機延遲後出現。

對於第二個和連續我的代碼工作得很好。我的問題是關於如何避免/解決這個現象？我做錯了什麼？

感謝您的關注

來源

2015-04-05 Alcides

在你的CSS，更改此：

visibility: "hidden";

＆hellip;爲此：

visibility: hidden;

否則，元素開始時可見的，所以createdTime可能尚未初始化的第一次點擊。

段：

window.onload = function() { 
 
    var clickedTime; //to store the time when the box is clicked 
 
    var createdTime; //to store the time when the box is created 
 
    var reactionTime; //secs between the box creation and box click 
 

 
    function appear() { 
 
    //this function is to make the box appear 
 
    setTimeout(function() { 
 
     document.getElementById("box").style.visibility = "visible"; 
 
     createdTime = Date.now(); 
 
     console.log("createdTime: " + createdTime); 
 
    }, Math.random() * 5000); 
 
    } 
 
    document.getElementById("box").onclick = function() { 
 
    //this is to hide the box, make it appear and calculate the reaction time 
 
    clickedTime = Date.now(); 
 
    console.log("clickedTime: " + clickedTime); 
 
    reactionTime = (clickedTime - createdTime)/1000; 
 
    console.log("reactionTime: " + reactionTime); 
 
    alert(reactionTime); 
 
    this.style.visibility = "hidden"; 
 
    appear(); 
 
    } 
 
    appear(); 
 
}

body { 
 
    background: gray; 
 
} 
 
#box { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
    visibility: hidden; 
 
}

<div id="box"></div>

來源

2015-04-05 03:13:14

在JavaScript中如何解決要素的顯示和變量

回答

相關問題