2011-12-16 2 views
0

Я хочу, чтобы браузер отображал секунды с момента последнего обновления. Я не понимаю, почему Код 1 не работает; Код 2 делает; Если код 1 не работает, почему работает код 3? Вызов setInterval аналогичен вызову CODE 1 и CODE 3. Способ определения функции отличается. Но мне непонятно, почему это имеет значение.Может кто-нибудь объяснить, что происходит в этом javascript-коде?

Большое спасибо за помощь. Я только начал изучать JavaScript.

КОД 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> 

КОД 2 же, как код 1, за исключением того, функция setInterval() записывается как

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

КОД 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> 

ответ

7

Код 1вызовыdisplayTimeSinceStart (из-за "()") вместо того, чтобы передать ссылку на него: setInterval получает возвращаемое значение этой функции (undefined). Оставьте скобки для исправления.

Код 2 передает строку для setInterval для оценки: необходимы парнеры, так как вы хотите, чтобы метод вызывался, когда интервал времени истекает.

Code 3 передает ссылку, что эквивалентно кодекса 1 без "()", поэтому она работает.

setInterval ожидает функциональную ссылку (предпочтительную) или строку, которая будет оцениваться.

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

+0

Большое спасибо. Это и ваш другой пост были очень полезными. – Curious2learn

2

В код 1, измените эту строку:

setInterval(displayTimeSinceStart(), 1000); 

к этому:

setInterval(displayTimeSinceStart, 1000); 

и он должен обновить свое время, один раз в секунду. Вы можете видеть, что исправленная версия работает здесь: http://jsfiddle.net/jfriend00/sL7HN/.

В код 2, вы передаете строку, которая будет отправлена ​​на eval() на каждый таймер, и это правильно вызовет нужную функцию. Это не является желательным способом кодирования. Гораздо лучше просто передать ссылку на направление функции, а не использовать строку и eval().

В код 3 вы передаете ссылку на функцию (например, мою фиксированную версию кода 1), которая является свойством объекта, поэтому функция будет вызываться при каждом тике таймера.

+0

Спасибо jfriend00. Цените свой ответ. – Curious2learn

Смежные вопросы