停止setInterval（）沒有全局變量

Question

我期待着開始然後停止一個setInterval，我遇到過的所有例子都用全局變量做這個，但我寧願不使用一個，如果我可以的話。

我有一個按鈕來啓動setInterval和另一個來停止它。我可以啓動它就好了，但是我無法在不使用全局變量的情況下停止它。

這是我有：

function counter() { 
    function stop() { 
    clearInterval(timer); 
    } 
    var timer = setInterval(function() { 
    console.log(new Date()); 
    }, 1000); 
    return stop; 
} 
$('#start').click(function() { 
    counter(); 
}); 
$('#stop').click(function() { 
    stop(); // this of course doesn't work 
}); 

Answer 1

你需要一個全局變量，但你可以在很多方面做，所以這裏的做法，HTML部分：

<button id="start">Start</button> 
<button id="stop">Stop</button> 

和JS部分：

function timer() { 
    var timer = null; 
    function stop() { 
    clearTimeout(timer); 
    } 

    function start() { 
    timer = setInterval(function(){ 
     console.log("repeat it"); 
    }, 500);  
    } 

    return { 
     stop, 
    start 
    }; 
} 

var t = timer(); 

var startBtn = document.getElementById("start"); 
var stopBtn = document.getElementById("stop"); 

startBtn.addEventListener("click", function(){ 
    t.start(); 
}, false); 

stopBtn.addEventListener("click", function(){ 
    t.stop(); 
}, false); 

這裏有一個demo

Answer 2

我認爲你需要一個靜態變量。但不幸的是，JavaScript不支持靜態變量。但是，我們可以創建一個。因爲在JavaScript函數被解釋爲對象，所以他們可以有靜態範圍變量。

function counter() { 
 
    if (typeof counter.timer == 'undefined') { 
 
     counter.timer = 0; 
 
    } 
 
    counter.timer = setInterval(function() { 
 
     $("#output").text(new Date()); 
 
    }, 1000); 
 
} 
 

 
function stop() { 
 
    clearInterval(counter.timer); 
 
} 
 
$("#start").on('click', function() { 
 
    counter(); 
 
}); 
 
$("#stop").on('click', function() { 
 
    stop(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" id="start">start</button> 
 
\t <button type="button" id="stop">stop</button> 
 
    <p id="output"></p>

Answer 3

您可以使用Java腳本閉包對於這一點，改變你的代碼如下：

function counter (action, tId) { 
    var timer =setInterval(function() { 
    console.log(new Date()); 
}, 1000); 
if(typeof tId!="undefined") 
    window.clearInterval(tId); 
    return function() { 
    if(action=='stop'){ 
    counter('stop', timer) 
    } 
    } 
} 

$('#start').click(function() { 
    counter('start'); 
}); 
$('#stop').click(function() { 
    counter('stop'); 
}); 

我們做的其實什麼是重新調用帶間隔功能-id如果行動停止。