js定时器(执行一次、重复执行)

admin · 发表于 2018-7-31 10:57:21

1，只执行一次的定时器

<script>
. D2 m! Z4 T! B6 w
//定时器异步运行
" X' t. D! L8 j
function hello(){
6 L/ }* \+ b$ J
alert("hello");
d' R, U) k/ B% ~; M7 Q# b
} 2 v( p$ |" _8 A o
//使用方法名字执行方法 : H a- y! X" v
var t1 = window.setTimeout(hello,1000); G% ?, B: _0 w) s0 K' _
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 . t& [& J4 R9 k5 ]& Q/ `
window.clearTimeout(t1);//去掉定时器 0 Y- R* R* ~( z0 d1 V
</script>

复制代码

2，重复执行的定时器

<script> " ^' ^" `, X2 t- [9 M! A" ]
function hello(){
6 Y$ i0 ~9 w% ]( N' o& {) y2 s
alert("hello"); ; Z$ u& `% \' f- d
} : ~1 h5 J' [5 N6 J# g' ^
//重复执行某个方法
9 L$ Q( l* M# H6 P1 m6 {5 Y9 h8 r
var t1 = window.setInterval(hello,1000); 4 n4 @4 j+ H4 z# C1 L
var t2 = window.setInterval("hello()",3000); 6 o, M1 N6 a7 x+ l
//去掉定时器的方法
! J$ ^. y7 F9 a( q1 A
window.clearInterval(t1); 3 |" h4 D3 a6 @8 K* P8 r/ V
</script>

复制代码

备注：

如果在一个页面中有两个方法，都是在页面加载完成之后执行的，实际却未能按先后顺序执行，可以参照如下方法解决：
可以在onload方法中添加一个定时器，设置一个定时器，“延迟”一段时间之后再运行，即可认为区分页面加载运行方法的先后顺序。

在javascritp中，有两个关于定时器的专用函数，分别为：

1.倒计定时器：timename=setTimeout("function();",delaytime);# o7 ~5 o" W4 C; m
2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成
) e, }. j) J/ M+ f+ o4 ?6 j“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。! U) U; d6 Y$ }: U9 S7 o# I/ \1 r
　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。
( H/ G( O& _3 Y# i比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，
6 ~. M8 U; l, g9 P) K+ o8 B则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。
% y; x2 l/ L! X8 D/ q5 e$ s比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

用以指定在一段特定的时间后执行某段程序。

JS中定时执行,setTimeout和setInterval的区别,以及l解除方法

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。8 v& K% z7 n/ G' S7 Z
setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.1 A4 Z% |, t) @; @' |
setInterval("function",time) 设置一个超时对象

SetInterval为自动重复，setTimeout不会重复。

clearTimeout(对象) 清除已设置的setTimeout对象: E$ i3 g) c5 r% s. g
clearInterval(对象) 清除已设置的setInterval对象

略举两例。
1 ?0 Y! U& p& K8 D& A4 g+ A- o- Z例1.表单触发或加载时，逐字输出字符串

<html>
6 H+ M) Z) a R& d3 c
<head>6 K! N1 a. W: @ a, G) R; _/ D0 W3 l
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /># ]& N' l8 I7 E+ t( ]9 w
<title>无标题文档</title>, K. z4 I: g- M% u
<script language="JavaScript" type="text/javascript">
0 o& m' X; \: }. t5 ?* h1 I. [8 q; l# w
var str = "这个是测试用的范例文字";, S( ]$ ?# M3 Y' w( i( y/ Q. s0 R
var seq = 0;
* }. g9 m; ^7 w1 j
var second=1000; //间隔时间1秒钟, r- q% J; D) J& t, g6 U
function scroll() {* @4 a, }) Z6 E+ d9 L3 s
msg = str.substring(0, seq+1);1 A+ Z3 p6 ^. M
document.getElementByIdx_x_x('word').innerHTML = msg;$ y8 g4 {. E& T" _; w; t: t) s
seq++;6 G6 r; ^2 v) q6 C
if (seq >= str.length) seq = 0;0 E; G4 O b- e( _& a; k+ B8 P
}( x+ m7 \- m# `( U/ v. k
</script>* x& _8 D, a, X c7 t' U
</head>5 e# x7 F: l$ F0 X, p( Q* B
<body onload="setInterval('scroll()',second)">
* c& Y% t: {+ y- o8 Q
<div id="word"></div><br/><br/>
5 A: ]5 q; z8 o7 \
</body>2 P |: U6 s" g' [; F' g
</html>

复制代码

例2.当焦点在输入框的时候，定时检查输入框信息，焦点不在时不执行检查动作。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">0 Q' \8 E7 `% o
<html xmlns="http://www.w3.org/1999/xhtml">
2 v1 Y- C$ T" f; D$ K- ]
<head>
& H5 D8 N, S2 c
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
3 z& j4 |$ h2 ]) \& V' C
<title>无标题文档</title>
; I3 D3 Y* H# j/ s- s
<script language="JavaScript" type="text/javascript">* T% ^ `6 Y# E1 s; e4 a
var second=5000; //间隔时间5秒钟
+ {9 l9 s( l0 f6 j& B$ Y
var c=0;5 c, P1 a6 Z) s8 K/ K; Z% M
function scroll() {9 E2 v F3 _) o1 h+ {/ Y
c++;
' h6 P# J( K. T$ C1 w
if ("b" == document.activeElement.id) {" R5 x% [$ G; K) v* D0 h, T
var str="定时检查第<b> "+c+" </b>次<br/>";
3 H1 n o" I! [! N5 c8 _
if(document.getElementByIdx_x_x('b').value!=""){
" R" n6 S* X( X
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
' ~5 {# C$ e! Z3 _8 N! t" E
}2 S0 H/ d# E& w
document.getElementByIdx_x_x('word').innerHTML = str;
[0 r p$ F; z' c* P6 @
}
3 R2 E8 _& |% D3 o; E
}
& y; L& Q9 v/ H L. s
</script>
; {/ l+ ?9 O! s3 C9 i- `9 a
</head>
; r6 l) N" O r3 x
<body>7 L+ p! u- \* @! V
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
8 O, a0 W2 X0 ^3 j3 J
<div id="word"></div><br/><br/>" D1 N1 O4 |4 r5 e
</body>
8 e2 }, R- D0 d8 u& o
</html>

复制代码

例3.下面这个是最简单的例子，定时器时间到达后弹出警告窗口。

<html xmlns="http://www.w3.org/1999/xhtml">( C- K4 I, V3 E' q- {& s6 C
<head>
/ {/ b5 o! X# e& w
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
" i8 ^% F+ d: W% K
<script language="javascript">, n' K5 V* k( d4 v6 i
function count() {0 k9 g0 a8 v# s8 @, o
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";
; |! b: T2 D* V4 K5 ~
setTimeout("alert('十秒钟到！')",10000)
' i( i8 q' Q: F9 m5 |% n0 u
}: s! ^/ i' b% @( B" n3 n
</script>
; y& n7 a% d0 z# |- F9 ~
<body>
5 P- g" F4 n) N* _
<div id="m"></div>
8 K1 B. ?5 z2 G* `7 E3 a
<input TYPE="button" value=" 计时开始" onclick="count()">
4 o& O+ ~+ x. N( ^$ a$ N: [& [
</body>
5 k& z {4 N/ C7 c7 L/ @5 W, q, k
</html>

复制代码

例4:倒计时定时跳转

<html>& L5 R1 Z/ t( A
<head>
" n! F* }6 X: T$ J+ ]
<base href="<%=basePath%>">
8 ~, K; p, a2 S5 G( Z1 s
<title>My JSP 'ds04.jsp' starting page</title>
7 I% h, q; H2 k. U* D m& K
<span id="tiao">3</span>+ G4 X1 [! p, i3 b2 d i$ Q
<a href="javascript:countDown"> </a>秒后自动跳转……, D5 _3 B9 Q9 D
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>& s7 D2 [) h+ n; n7 T: o7 k! n
, f+ F5 L8 @& Y3 ^
<script language="javascript" type="">
4 Z: p( v5 E, I4 l. J
function countDown(secs){. ]/ T4 g& Z* U; ~; ]7 D& [1 e
tiao.innerText=secs;
1 B( ?4 s$ T+ X7 z( z+ k
if(--secs>0)) J: f9 E, B% C4 _
setTimeout("countDown("+secs+")",1000);
. R3 R; @7 u( t3 D0 q
}
1 q2 p5 y' I* v! ]' T
countDown(3);) C) O1 c- [3 \/ S4 O0 X
</script>
7 E4 J* Z j, ]) M5 f9 J- D
( }) m+ @) ?8 x j4 H$ Y
</head>

复制代码

例6:

<head>
0 F3 f$ c" N M
<meta http-equiv="refresh" content="2;url='b.html'">
4 k9 S$ y+ C1 e, |! B4 {% ?
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">; y& F% I6 m1 S C
setTimeout("window.location.href='b.html'", 2000);
' h6 _% x; s/ _9 g5 q
//下面两个都可以用
n; p, x0 B7 X) E1 z0 u$ T/ |' s
//setTimeout("javascript:location.href='b.html'", 2000);8 |6 C6 d$ v- ]# A
//setTimeout("window.location='b.html'", 2000);
& T( H8 F4 Q2 O! A- b
</script>

复制代码

例8:

<span id="totalSecond">2</span>
! t7 E9 I6 w- i$ [, o
<script language="javascript" type="text/javascript">/ w! y& Y- B! J- g6 p9 R P
var second = document.getElementByIdx_x('totalSecond').innerHTML;
: @3 m2 h' i8 `# W: _. j( d
if(isNaN(second)){
% ^8 k; G$ B$ J& X5 T. [
//……不是数字的处理方法1 m" M* `* J8 b9 P2 p1 @- H
}else{, A' B1 [0 p2 r' i1 Z7 j! Z `! O0 g
setInterval(function(){1 {' a& R* E7 h' p' v. G0 V7 x W
document.getElementByIdx_x('totalSecond').innerHTML = --second;+ ?, B4 c- O5 L& o! b
if (second <= 0) {" i* }6 n4 V1 t% v) U: o- p5 m
window.location = 'b.html';
; H. w7 M+ d" j1 t/ X$ b
}
" Y$ j/ V2 U0 [, i3 s$ K) C$ f
}, 1000);2 c5 d$ r" r( W) `
}
M5 _6 ?6 F7 p& Z
</script>

复制代码

帐号		自动登录	找回密码
密码			立即注册

[js学习资料] js定时器(执行一次、重复执行)