тег script выполняется дважды при вызове из анимированного div - PullRequest
Новая
       12

тег script выполняется дважды при вызове из анимированного div

0 голосов
/ 27 марта 2012

у меня есть функция countdown (), определенная в статическом js-файле, main.js: 

function countdown() {
    var tID = window.setInterval( function() {
        var t = $("#countdown").html();
        $('#countdown').html(--t);  
        if (t <= 0) {
            window.clearInterval(tID);
            $("a.about").trigger("click");
        }
    }, 1000 );
}

У меня также есть следующее в содержании страницы: 

<div id="content">
  <p>Sorry, but no  page was found here. Redirecting you to the <a href="/">home</a> page in <span id="countdown">25</span></p>
  <script type="text/javascript">
      countdown();
  </script>
</div>

#content изначально скрыт и отображается с помощью jQuery (после загрузки с AJAX). по какой-то причине это приводит к тому, что блок <script> выполняется дважды - один раз, когда содержимое равно display:none, и один раз, когда вызывается функция показа jQuery. Таким образом, мой таймер отсчитывает 2 секунды за раз. (на самом деле 1 за раз, но 2 итерации происходят почти одновременно.) Если вместо анимации отображения div я просто выполняю $('#container').css('display','block');, код правильно создает один интервал. Кто-нибудь может объяснить это?

У меня есть пример, продемонстрированный в jsFiddle здесь

1 Ответ

1 голос
/ 27 марта 2012

Скопировал ваш код в jsfiddle - это может помочь

http://jsfiddle.net/rJHKQ/4/

Поскольку для вашего html-элемента установлено значение none, при изменении его отображения он перерисовывается для отображения, что приводит к повторному обращению к вашему методу.

Также отредактировал ваш пример и обновил его: (переместил ваш код из div) http://jsfiddle.net/NpKvr/

...