Различное поведение между встроенным и не встроенным JavaScript - PullRequest
0 голосов
/ 30 июля 2011

Я пытаюсь построить таймер. Пожалуйста, сравните две ситуации (первая работает, а не вторая):

В чем проблема?

Ответы [ 2 ]

5 голосов
/ 30 июля 2011

Это часто встречающаяся проблема у пользователей jsFiddle в разделе «JavaScript».Видите ли, код, помещенный в «секцию JavaScript», заключен в функцию, используемую в качестве обработчика load, поэтому во втором примере реальный результат будет следующим:

  <script type='text/javascript'>
  //<![CDATA[ 
  $(window).load(function(){
  var seconds = 0;

function timedCount() {
    $("#txt").val(seconds);
    seconds += 1;
    setTimeout("timedCount()",1000);
}
  });
  //]]> 
  </script>

Теперь,timedCount больше не является глобальной функцией, так как она доступна только в области действия обработчика load, и когда вы используете setTimeout со строкой кода, это оценивается из глобальной области.

Способы решения этой проблемы включают:

изменить вызов setTimeout на setTimeout(timedCount, 1000);

Что это делает, передает фактический объект функции на setTimeout,Вместо того, чтобы оценивать строку кода из глобальной области видимости, каждый раз это по существу сохраняет возможность вызова функции, поскольку область больше не имеет значения - вы передаете функцию setTimeout.

  var seconds = 0;

function timedCount() {
    $("#txt").val(seconds);
    seconds += 1;
    setTimeout(timedCount,1000);
}

делает timedCount глобальной функцией, используя timedCount = function() { ... };

Это просто делает timedCount глобальным, так что когда setTimeout пытается оценить timedCount(); из глобальной области видимости, это успешно, поскольку в глобальной области видимости есть функция timedCount.

  var seconds = 0;

timedCount = function() {
    $("#txt").val(seconds);
    seconds += 1;
    setTimeout("timedCount();",1000);
}
2 голосов
/ 30 июля 2011

Второй оборачивает функцию timedCount в функции jQuery ready, поэтому недоступен в глобальной области видимости.

Исправлено: http://jsfiddle.net/x7xhA/2/

...