2011-12-16 2 views
0

브라우저에서 마지막으로 새로 고친 이후 초를 표시하려고합니다. 왜 코드 1이 작동하지 않는지 이해할 수 없습니다. 코드 2는 ; 코드 1이 작동하지 않으면 왜 코드 3이 작동합니까? setInterval 호출은 CODE 1과 CODE 3에서 비슷합니다. 함수가 정의되는 방식이 다릅니다. 그러나 그것이 왜 변화를 일으키는 지 분명하지 않습니다.누군가가이 자바 스크립트 코드에서 무슨 일이 일어나는지 설명해 주시겠습니까?

도움 주셔서 대단히 감사드립니다. JavaScript를 배우기 시작했습니다.

코드 setInterval() 기능

setInterval("displayTimeSinceStart();", 1000); 

CODE 3

<html> 
<head> 
    <title>Time Since Refresh</title> 
</head> 
<body> 
<br/> 
<br/> 
<span id="timeSinceStart"></span> 

<script language="JavaScript"> 
    var timeRefreshed = new Date(); 
    var timeSinceStart = { 
     displayTimeSinceStart: function(){ 
      var now = new Date(); 
      //compute elapsed time 
      var elapsed = Math.round((now - timeRefreshed)/1000); 
      document.getElementById("timeSinceStart").innerHTML = "Time Elapsed: " + elapsed + " seconds."; 
     } 
    } 

    // Update seconds counter 
    setInterval(timeSinceStart.displayTimeSinceStart, 1000); 

</script> 

</body> 
</html> 
로 작성된 제외 CODE 1과 1

<html> 
<head> 
    <title>Time Since Refresh</title> 
</head> 
<body> 
<br/> 
<br/> 
<span id="timeSinceStart"></span> 

<script language="JavaScript"> 
    var timeRefreshed = new Date(); 
    function displayTimeSinceStart(){ 
     var now = new Date(); 
     //compute elapsed time 
     var elapsed = Math.round((now - timeRefreshed)/1000); 
     document.getElementById("timeSinceStart").innerHTML = "Time Elapsed: " + elapsed + " seconds."; 
    } 

    // Update seconds counter 
    setInterval(displayTimeSinceStart(), 1000); 

</script> 

</body> 
</html> 

CODE 2 동일 개

답변

7

코드 1통화 대신에 대한 참조를 전달 (때문에 "()"의)displayTimeSinceStart : setInterval 그 기능 (undefined)의 반환 값을 가져옵니다. 해결할 괄호를 버리십시오.

코드 2setInterval의 문자열을 전달합니다. 간격이 초과 될 때 메서드를 호출해야하므로 괄호가 필요합니다.

코드 3은"()"없이 코드 1 동등한 기준을 통과하므로 작동한다.

setInterval에는 기능 참조 (선호) 또는 평가할 문자열이 필요합니다.

More details (including why sometimes a method call as a parameter to setTimeout makes sense). 이것에

setInterval(displayTimeSinceStart(), 1000); 

:

+0

고맙습니다. 이 게시물과 다른 게시물은 매우 유용했습니다. – Curious2learn

2

코드 1,이 라인 변경

setInterval(displayTimeSinceStart, 1000); 

을 그리고 당신의 시간, 초에 한번씩 업데이트해야합니다. 여기서 고정 버전의 작업을 볼 수 있습니다 : http://jsfiddle.net/jfriend00/sL7HN/.

코드 2에서 각 타이머 틱마다 eval()으로 전송되는 문자열을 전달하면 제대로 원하는 기능이 호출됩니다. 이것은 코드 작성에 바람직한 방법은 아닙니다. 함수 방향에 대한 참조를 전달하고 문자열을 사용하지 않는 것이 훨씬 더 좋습니다. eval().

코드 3에서는 함수가 각 타이머 틱에 호출 할 수 있도록 객체의 속성을 우연히 (코드 1의 내 고정 버전 같은) 함수 참조를 전달한다.

+0

감사합니다 jfriend00. 귀하의 응답을 감사하십시오. – Curious2learn

관련 문제