2012-03-27 77 views
0

我有一個靜態的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 show函數。因此,我的計時器每次減少2秒。 (實際上每次1個,但是2個迭代幾乎同時發生)。如果不是動畫顯示div,而是簡單地執行$('#container').css('display','block');,代碼會正確創建單個區間。任何人都可以解釋嗎?

我在的jsfiddle證明的例子here

回答

1

複製你的代碼的jsfiddle - 這可能幫助

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

這是因爲HTML元素已顯示設置爲無,當你改變的顯示它正在重畫來顯示 - 導致你的方法再次被擊中。

也編輯你的榜樣和更新它:(移動你的代碼出來的div) http://jsfiddle.net/NpKvr/

+0

這個工作,但最關鍵的是倒計時()函數需要從#內容專區內調用。此