0

下面的代码是我正在尝试做的一个示例.. 规模较小。此代码实际上从未清除间隔，它们只是开始堆叠。谢谢！

<script>
var num = 0;
var counter = setInterval('start_count()',1000);

function start_count(type){
    num++;
    document.getElementById('num_div').innerHTML = num;
}
function stop_count(){
   clearInterval(counter);
   num = 0;
}
</script>
<div id="num_div"></div>
<br>
<input type="button" value="Stop" onClick="stop_count()">
<input type="button" value="Start" onClick="counter = setInterval('start_count()',1000)">

请帮忙！

4

4 回答 4

4

请不要将字符串传递给setInterval，JS 函数是一流的对象，因此它们可以作为参数传递，分配给变量或由其他函数返回。在您的示例中，我将编写以下内容：

<input type="button" value="Start" id="intervalStart"/>
<input type="button" value="Start" id="intervalStop"/>

然后，JS：

window.onload = function()//not the best way, but just as an example
{
    var timer, num = 0, 
    numDiv = document.getElementById('num_div');//<-- only scan dom once, not on every function call
    document.getElementById('intervalStart').onclick = function(e)
    {
        this.setAttribute('disabled','disabled');//disable start btn, so it can't be clicked multiple times
        timer = setInterval(function()
        {
            numDiv.innerHTML = ++num;
        },1000);
    };
    document.getElementById('intervalStop').onclick = function(e)
    {
        document.getElementById('intervalStart').removeAttribute('disabled');//enable start again, you could do the same with disable btn, too
        clearInterval(timer);
        num = 0;
        numDiv.innerHTML = '';
    };
};

这段代码需要做更多的工作，尽管至少它不会过多地污染全局命名空间。
请注意，我使用了一个变量来引用num_div元素，这样您的间隔回调函数就不必每 1000 毫秒扫描整个 DOM 以查找该元素。不多，但请记住，每次使用 jQuery 选择器或getElement(s)By*方法时，JS都必须遍历 DOM 并查找元素。保留对您将需要很多元素的引用只会使脚本更有效。

于 2012-11-27T16:46:55.070 回答
1

我认为这段代码会做你想做的事情：

<script>
    var num = 0;
    var counter;

    function start_interval() {
        counter = setInterval(function () { start_count() }, 1000)        
    }

    function start_count() {
        num++;
        document.getElementById('num_div').innerHTML = num;
    }
    function stop_count() {
        clearInterval(counter);
        num = 0;
    }
</script>
<div id="num_div"></div>
<br>
<input type="button" value="Stop" onClick="stop_count();">
<input type="button" value="Start" onClick="start_interval();">
于 2012-11-27T16:51:35.477 回答
0

不清楚到底是什么问题。您的代码工作正常（除了关于将字符串传递给 setInterval 的注释）。如果您的问题是多次点击“开始”会增加多个间隔，那么是的。您可以通过检查时钟是否已在运行来解决此问题。

这是一个例子：

function startCounter() {
    if (!counter) {
        counter = setInterval(start_count,1000);
    }
}

function start_count(type){
    num++;
    document.getElementById('num_div').innerHTML = num;
}

function stop_count(){
   clearInterval(counter);
   counter = 0;
   num = 0;
}

这是一个小提琴

于 2012-11-27T16:47:30.977 回答
0 
<script>
    var num = 0;
    var counter = setInterval(start_count,1000);  
    function start_count(type){     
        num++;     
        document.getElementById('num_div').innerHTML = num;
    }
    function stop_count(){    
        clearInterval(counter);    
        num = 0;
    }
</script>
<div id="num_div"></div>
<br>
<input type="button" value="Stop" onClick="stop_count()">
<input type="button" value="Start" onClick="counter = setInterval(start_count,1000)">

那是工作版本。但正如评论中提到的，两件事之一应该传递给 a setIntervalor setTimeout：

定义应该执行的代码的函数：

setTimeout(function(){
  /* timeout code */
}, 1000);

或对您要调用的函数的引用（不包括引号）：

function myTimeoutFunction(){
  /* timeout code */
}
setTimeout(myTimeoutFunction, 1000);
于 2012-11-27T16:45:40.583 回答