js的定時器

時間 2019-12-15

原文原文鏈接

有時候前端也須要定時器進行頁面控制，下面來講js定時器：javascript

在javascritp中，有兩個關於定時器的專用函數，分別是：html

1.倒計定時器：timename=setTimeout("function();",delaytime);前端

2.循環定時器：timename=setInterval("function();",delaytime);java

第一個參數「function()」是定時器觸發時要執行的動做，能夠是一個函數，也能夠是幾個函數，函數間用「；」隔開便可。好比要彈出兩個警告窗口，即可將「function();」換成「alert('第一個警告窗口!');alert('第二個警告窗口!');」；c++

而第二個參數「delaytime」則是間隔的時間，以毫秒爲單位，即填寫「5000」，就表示5秒鐘。　　函數

倒計時定時器是在指定時間到達後觸發事件，而循環定時器就是在間隔時間到來時反覆觸發事件，二者的區別在於：前者只是做用一次，然後者則不停地做用。好比你打開一個頁面後，想間隔幾秒自動跳轉到另外一個頁面，則你就須要採用倒計定時器「setTimeout("function();",delaytime)」，而若是想將某一句話設置成一個一個字的出現，則須要用到循環定時器「setInterval("function();",delaytime)」。測試

基本到這裏沒什麼說的了，下面是解除方法：ui

clearTimeout(對象) 清除已設置的setTimeout對象
clearInterval(對象) 清除已設置的setInterval對象xml

略舉兩例。例1.表單觸發或加載時，逐字輸出字符串htm

<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文檔</title> <script language="JavaScript" type="text/javascript"> var str = "這個是測試用的範例文字"; var seq = 0; var second=1000; //間隔時間1秒鐘

function scroll() {
msg = str.substring(0,
seq+1);
document.getElementByIdx_x_x('word').innerHTML = msg;
seq++;
if
(seq >= str.length) seq =
0;
}
</script>
</head>
<body
onload="setInterval('scroll()',second)">
<div
id="word"></div><br/><br/>
</body>
</html>

例2.當焦點在輸入框的時候，定時檢查輸入框信息，焦點不在時不執行檢查動做。

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type" content="text/html; charset=gb2312"
/>
<title>無標題文檔</title>
<script language="JavaScript"
type="text/javascript">
var second=5000; //間隔時間5秒鐘
var c=0;
function
scroll() {
c++;
if ("b" == document.activeElement.id) {
var
str="定時檢查第<b> "+c+"
</b>次<br/>";
if(document.getElementByIdx_x_x('b').value!=""){
str+="輸入框當前內容爲當前內容爲<br/><b>
"+document.getElementByIdx_x_x('b').value+"</b>";
}

document.getElementByIdx_x_x('word').innerHTML = str;}}</script></head><body><textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/><div id="word"></div><br/><br/></body></html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。