2012-03-28 82 views
0

有人可以幫助我開始使用按鈕超時功能。我想要的只是一個按鈕(點擊時),它在2秒內變爲非活動狀態。之後它再次活躍。Onclick按鈕超時javascript

+0

熟悉window.setTimeout(funcName,milliseconds),您可以在其中調用函數,該函數在2000ms之後啓用按鈕。 – Daxcode 2012-03-28 19:24:53

回答

1
<input type="button" value="click" id="click" onclick="foo(this);"/>​ 

function foo(obj) { 
    obj.disabled = true; 
    setTimeout(function() { 
     obj.disabled = false; 
    }, 2000); 
}​ 

LIVE DEMO

window.setTimeoutMDN

執行代碼段或功能指定後的延遲。

+1

糾正我,如果我錯了,但由於'disabled'是一個屬性,而不是一個屬性,很確定你可以(也應該)使用'true'和'false'作爲值。 – 2012-03-28 19:30:04

+0

@ Xeon06。這是新規格,對於HTML5,如果我沒有錯,你是對的。 Updted。 – gdoron 2012-03-28 19:31:01

+0

謝謝大家的反饋意見,非常有幫助,因爲我試圖擴大我的js知識。 – need2nobasis 2012-03-28 20:14:53

1

開始與:

<button>Click me!</button> 

添加事件:

<button onClick="...">Click me!</button> 

現在我們需要把一些在地方...的。

this可以被用來指

this.disabled可以設置爲truefalse禁用「剛點擊按鈕」(或重新啓用)的按鈕。

setTimeout(function() {...},2000);在兩秒鐘後(或者接近定時器分辨率允許)執行匿名函數。

再次,需要把東西放在...。我已經告訴過你如何重新啓用按鈕。

雖然,由於this在匿名函數中不是非常可靠,所以最好從var t = this;開始並使用t來表示按鈕。

與所有的地方,你必須:

<button onClick="var t = this; t.disabled = true; setTimeout(function() {t.disabled = false;},2000);">Click me!</button> 

完成。我希望這個解釋是有幫助的。

PS。對於那些誰反對聯事件處理程序:

  1. 這是一個例子
  2. 的OP是初學者
  3. 內聯事件是不夠好
+0

雖然他是初學者,但您不必**寫內聯腳本...... :) – gdoron 2012-03-28 19:28:47

+0

我剛剛對使用內聯事件處理程序發表評論。 [好](http://okayface.com/) – 2012-03-28 19:29:08

1

功能setTimeout允許您指定函數在毫秒量過去後被調用。在這種情況下,我傳遞了一個匿名函數,即一個沒有名稱的函數,該函數僅用於在2秒後重新啓用我的按鈕。

var mybutton = document.getElementById("mybutton"); 
mybutton.onclick = function() { 
    mybutton.disabled = true; 
    setTimeout(function() { 
     mybutton.disabled = false; 
    }, 2000); 
};​ 

Live example

0

可以在JavaScript中使用的setTimeout()函數。類似於

<html> 
<head></head> 
<body> 

<input id="test" type="submit" value = "clickme" onclick="deactivatefunc()"> 
<script type="text/javascript"> 

function deactivatefunc() 
{ 
    var btn = document.getElementById("test"); 
    btn.disabled = true; 
    var mytimer = setTimeout(activate,2000); 
} 

function activate() { 
    var btn = document.getElementById("test"); 
    btn.disabled = false; 
} 
</script> 
</body> 

</html>