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

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

1，只执行一次的定时器

<script>
2 f8 c6 [; j a: S+ N$ u
//定时器异步运行
" G) W, L" R$ P5 M3 H6 u4 {9 e. N
function hello(){
) c9 W2 c0 {+ u
alert("hello"); - F# y) _, h0 q4 K; d q1 m$ m
}
% W1 _& L# }+ X0 d, P
//使用方法名字执行方法
( f& `% e+ y5 ^6 j, |% W- I) U
var t1 = window.setTimeout(hello,1000); 1 | u* h! Q$ s
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 5 d* k5 V' {! s2 Q( `8 T9 |
window.clearTimeout(t1);//去掉定时器
( P- F$ }: T7 u" K ~. r
</script>

复制代码

2，重复执行的定时器

<script>
9 ~, m M' ~" E1 d
function hello(){
# c2 _6 y& B8 L& K" U7 ]
alert("hello");
% Q% F, `& e! I8 @( I" n
}
* M/ H" O' s* E9 U
//重复执行某个方法
% ]5 s* U+ _) B- `$ i
var t1 = window.setInterval(hello,1000);
" F5 M4 M. F3 ?/ H, I
var t2 = window.setInterval("hello()",3000); # {( o7 \4 o' _' x2 B/ N" v
//去掉定时器的方法 , W: W) U' t4 I
window.clearInterval(t1);
6 L1 q8 |/ p! g+ M
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);
r% n- {6 W7 {# |7 a2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成
7 K( y2 {7 W" Y% j* e9 G“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。0 p, X: i0 L! T1 {5 E( ~
　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。
/ f& q' g1 J0 O/ V5 R5 [比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，8 \) G9 F' q0 R' q
则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。
0 T% W5 p, D1 W! ^4 o3 d比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。
- ?* ?9 M% f. R( z" r4 q& \3 j) fsetTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.
8 y! x8 t' C# dsetInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象# a$ L$ n5 L/ \. B! i! ?
clearInterval(对象) 清除已设置的setInterval对象

略举两例。
- R! |- H+ ?2 j7 F( d2 V例1.表单触发或加载时，逐字输出字符串

<html>% A: b4 ~+ `8 c8 b) i2 f+ Y( b4 `$ b5 g
<head>
+ }4 j( o. G9 o8 B. D; t6 w
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
# u- T5 v! r% g, l( N5 \& O
<title>无标题文档</title>
8 A' G6 O9 _! o- s" b- I; @
<script language="JavaScript" type="text/javascript">
, f8 g1 i/ T8 G2 f( G
var str = "这个是测试用的范例文字";
, s {3 h! _2 i9 Y3 s& N7 p/ Y
var seq = 0;5 u7 w7 {* F+ F" ?( b' i& D. m
var second=1000; //间隔时间1秒钟
, P! d: k( b) T" R
function scroll() {
d1 s$ k; W7 p5 a) k1 L
msg = str.substring(0, seq+1);2 A! U+ g P0 D8 {2 T* R* z
document.getElementByIdx_x_x('word').innerHTML = msg;% |. ^% {- s5 w0 c0 ^
seq++;
2 R# Q# s8 ~% ?4 Y/ l
if (seq >= str.length) seq = 0;
) s! y8 }9 L) D% L% t
}
( h7 _& `8 u2 q7 H0 p; @8 k
</script>8 `' i4 x% j2 B* x! W
</head>4 e! `- P' N/ ] H6 R9 {
<body onload="setInterval('scroll()',second)">) O5 U9 S$ T9 U5 ?+ W' E& H
<div id="word"></div><br/><br/> B% Q, d- Z. c- ?# N; i
</body>
# Q0 k, z I. ^6 C
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1 M$ x p% }6 D; ^- A5 o
<html xmlns="http://www.w3.org/1999/xhtml">
7 ?, l3 J9 n1 Y. U% D$ U
<head>) D3 t6 B. V5 L, w
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />) f6 w; ~: [1 v; U* Y
<title>无标题文档</title>0 W5 m; C/ w5 X$ L
<script language="JavaScript" type="text/javascript">% D- _! w8 {+ a V
var second=5000; //间隔时间5秒钟8 k) T, _9 t( k E5 I
var c=0;+ z! s0 I- Q! G6 C; @, g
function scroll() {6 A! `2 V: `2 b8 [; V
c++;% E S5 p5 O/ \9 D1 D$ ~. p
if ("b" == document.activeElement.id) {0 b1 P$ Y, X8 l) T0 ^, C! D; @9 r
var str="定时检查第<b> "+c+" </b>次<br/>";% z7 P$ Q6 X" W* w+ R6 [
if(document.getElementByIdx_x_x('b').value!=""){# |0 q( h; Z! \8 ^
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
( O, e+ Y# l' ]2 U
}0 e( L$ a/ ~$ C! L! J0 d
document.getElementByIdx_x_x('word').innerHTML = str;
I6 x5 v$ E7 I2 F) Y0 S
}: J; b0 X$ D. s. ?0 _& F" u8 p
}
! a! K* K5 s. u n) ]
</script>
; j o3 C) R( F6 F: |
</head>) d1 M; l, H- O( C* R
<body>) L- @- B& D9 h5 y5 i: W2 s
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>/ @: K8 r/ ]& r2 S: C! s0 E
<div id="word"></div><br/><br/>
5 y0 q. {( X; P
</body>7 M) u3 O" T# D9 @( T4 A" B; {9 J
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">
- m' m3 S6 |4 m$ I I3 w! r
<head>
' I. f) E5 G! E$ L, y# s
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />- F: K t% P9 O8 a7 D4 m- G- ?
<script language="javascript">
* F0 c; l5 b/ k4 N9 k, X4 z
function count() {
: y# S2 K, q5 x6 e
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";
3 _. _ o! X0 w6 ?. A
setTimeout("alert('十秒钟到！')",10000)
5 o- E6 [- u$ e, u( Z
}
% K5 c& d$ f" y* U; ~ s
</script>
2 T3 M5 v. @$ q2 l; a h2 O
<body>8 U) [" X6 T/ m& ?8 Y9 A1 B( ]0 A
<div id="m"></div>; `3 m+ R+ `- b& g* L
<input TYPE="button" value=" 计时开始" onclick="count()">
1 T9 \. t3 q% B1 p5 d0 \
</body>
; c. P. Q( u$ U, Z1 }
</html>

复制代码

例4:倒计时定时跳转

<html>
! _- `5 Z+ I: G7 }2 @6 d
<head>6 K7 w6 T* X6 ^8 d( b
<base href="<%=basePath%>">: L5 j6 P9 _$ `2 x: K' c; s
<title>My JSP 'ds04.jsp' starting page</title>0 P% ~6 J* U& Q
<span id="tiao">3</span>
" g* ]- }9 g; ]% \! L
<a href="javascript:countDown"> </a>秒后自动跳转……
7 N& r; d) K5 R( `6 o7 @7 B
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>
. U: _6 H3 c6 a8 H# F) m# _
3 a8 i& U1 }3 z. P( ?
<script language="javascript" type="">9 q" _. b7 a8 J a, T. _: R' F7 V! ~
function countDown(secs){. N. a% E! e9 ?' \1 B; b
tiao.innerText=secs;9 P% Q' F! C: @ h% a
if(--secs>0)- L0 l+ A; D3 Z, J3 p# E- Q, C
setTimeout("countDown("+secs+")",1000);# Y4 |$ M/ K7 w7 E! l
}' u7 |" L: l$ S, z
countDown(3);
8 R, u: g$ [) r2 H# L7 y
</script># N! w' {: d6 z2 F d! ?- I
# L) ? ?' g" ~, T
</head>

复制代码

例6:

<head> $ U1 F3 p L" `2 h; \" W8 \
<meta http-equiv="refresh" content="2;url='b.html'"> 2 y: |0 U. R; c/ l- P0 Y
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">
9 ^5 R2 v$ i. n- V2 R. K2 A
setTimeout("window.location.href='b.html'", 2000);0 O+ l: p, @4 i( G! p. |
//下面两个都可以用$ d# G, B+ w8 I# a7 W/ S" B3 s
//setTimeout("javascript:location.href='b.html'", 2000);" D# o' I- J6 ]7 h; U& i6 D7 N& F
//setTimeout("window.location='b.html'", 2000);
4 I9 ?# V1 ?5 w) u) G, s) _
</script>

复制代码

例8:

<span id="totalSecond">2</span>7 x# @* [% I4 V. Y
<script language="javascript" type="text/javascript">* j( g+ b& V, W3 L3 S |+ s* {
var second = document.getElementByIdx_x('totalSecond').innerHTML;* C1 A; ]& T5 U, y
if(isNaN(second)){
t; y9 q W5 E7 \% o0 x
//……不是数字的处理方法7 w" g+ `- [4 k
}else{
. w0 n1 @! ~7 j0 M
setInterval(function(){0 X9 [3 G4 X$ N, l# c' C: M
document.getElementByIdx_x('totalSecond').innerHTML = --second;
1 H' x5 X: U8 t! q
if (second <= 0) {* D' v ~5 o4 n8 h( K8 u# E
window.location = 'b.html';
- F' T7 ^; G' F
}+ T6 m3 z0 Y3 k5 d2 y" y) ]
}, 1000);: {1 ?2 l1 m7 V
} 2 [8 i1 n1 s, H( w. ^( j0 b
</script>

复制代码

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

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

浏览过的版块