Question

我有一个在静态js文件main.js中定义的countdown（）函数：

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

中展示了一个示例

Answer 1

将您的代码复制到jsfiddle中 - 这可能会有所帮助

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

因为你的html元素的显示设置为无，当你改变它的显示时，它会重绘显示 - 导致你的方法再次被击中。

还编辑了您的示例并对其进行了更新:(将您的代码移出div） http://jsfiddle.net/NpKvr/

从动画div调用时脚本标记执行两次

1 个答案: