Question

下面的代码是我想要做的一个示例..在较小的范围内。这个代码实际上从未清除间隔，它们只是开始堆叠。谢谢！

<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)">

请帮助！

Answer 1

请不将字符串传递给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并查找元素。保持对您需要的元素的引用只会产生更高效的脚本。

Answer 2

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

<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();">

Answer 3

<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)">

那是working version。但正如评论中所提到的，应将两件事之一传递给setInterval或setTimeout：

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

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

或者您要调用的函数的引用（免除引号）：

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

Answer 4

不清楚究竟是什么问题。您的代码工作正常（除了有关将字符串传递给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;
}

这是fiddle

Javascript如何设置和获取函数的间隔

4 个答案: