2011-07-31 155 views
1

這裏是我的代碼:重置setTimeout每按鈕點擊一次?

var sec = 10; 
var timer = setInterval(function() {  
    $('#timer span').text(sec--); 
}, 1000); 

它設置一個setTimeout 10秒。我想要一個重置按鈕,點擊後,再次以10秒的延遲呼叫setTimeout

+0

在哪裏你的代碼? – Natim

+0

@Natim我添加了我的代碼 – idontknowhow

回答

6

你可以通過將你的setTimeout()調用的結果存儲到某個變量中,然後在點擊按鈕時將存儲的結果傳遞給clearTimeout(),然後再調度新的超時並將其分配回相同的變量。

聽起來有點棘手,但它確實很簡單。這裏有一個例子:

http://jsfiddle.net/kzDdq/

+0

沒有必要污染全局命名空間。避免全局變量。 –

+0

@Šime - 你的例子和我的一樣把許多東西放入全局命名空間。在全局範圍中使用'var'仍然會創建一個全局變量。此外,該示例的目的是演示setTimeout() - >某些變量 - > clearTimeout()的流程,僅此而已。 – aroth

+0

通常,在我對SO的回答中,暗示JavaScript代碼應該位於ready處理程序(或加載處理程序)內,並且我的附加jsFiddle演示程序可以證明這一點。 –

6

HTML:

<button id="resetButton">Reset</button> 

的JavaScript:

var resetButton = $('#resetButton')[0], 
    timerId; 

function timerExpired() { 
    alert('Timer expired'); 
} 

$(resetButton).click(function() { 
    clearTimeout(timerId); 
    timerId = setTimeout(timerExpired, 10000); 
}).triggerHandler('click'); 

注:這段JavaScript代碼應該放在裏面a ready handler

現場演示:http://jsfiddle.net/QkzNj/

(你可以設置延遲像3000(3秒的較小值) - 這將使它更容易測試演示)

0
<div>Div</div> 

var div = document.getElementsByTagName("div")[0]; 

function timedMsg() { 
    console.log("timeout expired."); 
    div.t = setTimeout(timedMsg, 1000);  
} 

timedMsg(); 

div.onclick = function() { 
    clearTimeout(div.t); 
    timedMsg(); 
}; 
+0

我更新了我的代碼,請參閱 – idontknowhow