简单的 JavaScript 计数器函数

Question

我想做一个计数器功能，精确的开始时间和显示地点的变量。

因此，如果我想每页有多个计数器，我可以轻松管理它：

$(document).ready(function() {

            // set time and place (where to display the counter)
            function countDown(time, place){

                if(time > 0){
                    time--;    
                    setInterval(function(){countDown(time,place)}, 1000);
                } // end if

                if(time == 0)
                {
                    window.clearInterval(time);
                }
            } // end function

                     $('.click').click(function(){
                        countDown(30, '#counter');                              

                     });

}); // end DOM

   </script>
</head>


<body>
    <div class="click">clickme</div>
    <br />

    <div id="counter">30</div>

</body>

Answer 1

试试这个：

    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>


                var myVar;
var clickcount=0;

function countDown (time, place) {
        if (time > 0) {

        $(place).html(time);
        time--;
        myVar=setTimeout(function () { countDown(time, place); }, 1000);
  }
}

function startreset(time,place){
        clickcount++;
        if(clickcount % 2 === 0){
             clearTimeout(myVar);              
        } else {
            countDown(time,place);
        }

    }

$('.click').click(function(){
        startreset(30, '#counter');                              
        });



       </script>
    </head>




 <body>
        <div class="click" onClick="javascript:countDown(30,'#counter');">clickme</div>
        <br />

        <div id="counter">30</div>

    </body>

Answer 2

您可能遇到的问题是您多次调用 setInterval。 setInterval 不仅仅等待您告诉它的x毫秒，然后调用您的方法，它还会继续每隔x毫秒调用您的方法。 因此，当您第一次调用 countDown 时，将为您的函数设置一个间隔。 该间隔到期并再次调用 countDown。 一切都很好，到目前为止，但现在倒数第二个呼叫建立ANOTHER的setInterval。 程序将等待x毫秒从第二个 setInterval 调用 countDown，但它会更快地从第一个 setInterval 调用它。

...换句话说，您不应该重复调用 setInterval。 你想要的是 setTimeout，它等待指定的时间，然后调用指定的方法一次。

function countDown (time, place) {
  if (time > 0) {
    time--;
    $(place).html(time);
    setTimeout(function () { countDown(time, place); }, 1000);
  }
}

或者，如果您今天不觉得递归：

function countDown (time, place) {
  var interval = setInterval(function () {
    if (time > 0) {
      time--;
      $(place).html(time);
    } else {
      window.clearInterval(interval);
    }
  }, 1000);
}

它利用了 setInterval，但只有一次。

JSFiddle 提供： http : //jsfiddle.net/LKvBR/