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

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

1，只执行一次的定时器

<script>
* B# [5 e( {% R- t5 H3 n7 I- X9 G
//定时器异步运行
+ m; h) W, e( O" N" d0 W4 }8 z
function hello(){ % _+ I2 S, @6 I, \5 X
alert("hello");
3 k# O5 m. n3 S
} 2 Y0 L& @' M% i: i
//使用方法名字执行方法 7 y2 }% K! E; K; J! E2 R1 G4 N3 T
var t1 = window.setTimeout(hello,1000); / l. ~; g+ }% j$ j z1 k2 ~ r
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
2 U* p' [7 a- ?: w$ k
window.clearTimeout(t1);//去掉定时器
; Z6 [ b1 u6 C4 u, M
</script>

复制代码

2，重复执行的定时器

<script>
6 N! @+ S) w% R
function hello(){ 4 x( e2 K5 V; e, M- {
alert("hello"); 1 t8 c; F) e/ n; A+ {
}
' A9 _5 R: S7 W& d
//重复执行某个方法
: S0 N& J$ U, L; B* I
var t1 = window.setInterval(hello,1000);
; Y. o, I* z& C E+ y
var t2 = window.setInterval("hello()",3000); 3 S6 q- I; s4 m) m
//去掉定时器的方法
g. K. Z+ K# X- L. G" U+ s
window.clearInterval(t1);
}9 p q1 s& h3 Q0 A
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime); k: L/ U6 C3 q6 z1 f: ^
2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成* v% J& r* X, f: B$ b$ U5 o, q2 D
“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。
# L3 @0 e, k3 a& u& h　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。! p% [8 F' f! @' z5 K- {
比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，, L& L* I- F7 S
则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。3 n& i# Z7 ?, z0 Z& V, u1 {$ ?6 ^
比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。# U$ }. X" j, S5 ?0 A- j
setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.0 F1 s3 q; T; p2 I! |
setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象
+ j' h6 \7 l9 L: {# IclearInterval(对象) 清除已设置的setInterval对象

略举两例。
5 v# T+ v+ j" D# I9 `例1.表单触发或加载时，逐字输出字符串

<html>
5 ^- J. i/ a1 G* Z
<head>! ?# i d. Z) v% `
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /># T3 w: L j! a) T5 |8 P% W/ n* F
<title>无标题文档</title># r/ C* J7 o6 F0 Z5 j1 D# R9 M/ y1 e
<script language="JavaScript" type="text/javascript">
- o" l. {% x! ^3 _# {2 Z0 W7 L
var str = "这个是测试用的范例文字";- d! G! O( P3 W
var seq = 0;: S: D( W; {- _+ I+ I, D# _- n& e
var second=1000; //间隔时间1秒钟
8 K" r' z9 \2 y' [2 a
function scroll() {: O: P& w$ A" E3 n, C; B
msg = str.substring(0, seq+1);
# d) H2 N( F3 n7 m
document.getElementByIdx_x_x('word').innerHTML = msg;& L* a$ C, \8 l- `' \
seq++;+ v0 |5 F, U- S6 b3 A T$ U
if (seq >= str.length) seq = 0;
: e$ ]7 s, q+ R( u3 C, G( t
}0 B# X0 C2 D$ i1 F3 C, k% M# v9 w% y
</script>
! l/ J$ n6 A2 \/ R2 F' V
</head>
/ o. V0 N! L+ G Q0 A0 k0 _% v! i
<body onload="setInterval('scroll()',second)">9 W5 Q1 Q# {4 X, k8 W: A! Z6 A! B
<div id="word"></div><br/><br/>" S9 S1 Y H! n& m# {; X
</body>9 | {( [3 [. n( _
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
/ u& w7 {/ t& {* [
<html xmlns="http://www.w3.org/1999/xhtml">
( e7 y/ k( H6 M1 [* U1 R
<head>
5 I1 y3 [; E1 F. h
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
3 o2 k) @1 z7 a
<title>无标题文档</title>8 R3 t. v' U% \1 I- a5 D7 {% s
<script language="JavaScript" type="text/javascript">" J+ B2 l6 R" _4 Y
var second=5000; //间隔时间5秒钟, O* [! r7 `6 `+ \; A# l3 y
var c=0;) r5 T4 [# b* y1 D+ A9 N
function scroll() {* B( s& G2 w. L9 v4 d
c++;
$ Y# ~( ]' \$ s# W
if ("b" == document.activeElement.id) {( H& r5 h% K+ _/ h' u
var str="定时检查第<b> "+c+" </b>次<br/>";: O. q1 f5 l2 _/ Y
if(document.getElementByIdx_x_x('b').value!=""){/ C, Q4 x' O# \% }, f* r: O
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
, p) A# ?7 a2 L# h
}
' J `% \; C: {9 b2 h: N; J1 A
document.getElementByIdx_x_x('word').innerHTML = str;
& [" B1 K) I2 I
}1 v8 Y! ? f0 M- h2 x9 N. ]
}
' d, }7 I" U- t4 @0 Z; o( C+ z
</script>$ v: c3 u3 L* D2 f# ^2 a
</head>
0 K( @& a6 q5 m/ H+ Q( {
<body>! T/ }6 ]: h. Q- d' E6 M
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>% y: P1 g$ T( V; m2 D9 R) f
<div id="word"></div><br/><br/>
4 ~/ \: M6 k1 m6 L( Q* ]" a; m
</body>% z" ^! u: K5 l, C L K& S
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">- A% r" k! K% T$ V. ]: C4 X
<head>3 a- r; w2 a1 J
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
9 T, ^0 @: B. Z+ `
<script language="javascript">
- K" g. j3 ~2 h6 u
function count() {
# T8 c9 ^/ Q7 `7 c2 @5 M, M
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";
0 |2 y' N. f2 w
setTimeout("alert('十秒钟到！')",10000)9 D- F* t3 }' [- L" G8 ]
}
/ {& c3 ~: \* r2 P9 Q' K( ]' Y C
</script>
- G! l8 J0 t2 M# ]' \. A9 R! f
<body>- n2 u3 Y8 s: r1 P, ?( E
<div id="m"></div>% r2 f0 C1 Q, D8 L Y
<input TYPE="button" value=" 计时开始" onclick="count()">. v! C* n6 X, O5 m1 E+ Y( H" k
</body>
6 Z- x& y1 j2 x. `4 Y) q
</html>

复制代码

例4:倒计时定时跳转

<html>
' e+ _6 Y$ i) |7 t: i
<head># I! U/ v1 f0 M8 W# |* {
<base href="<%=basePath%>">6 r" Q3 N- a3 P; T* {8 C: e
<title>My JSP 'ds04.jsp' starting page</title>
5 h$ v+ j, T' ~. ] O* o- k
<span id="tiao">3</span>& O' |/ x. U) B V1 @" Y
<a href="javascript:countDown"> </a>秒后自动跳转……
7 }2 e6 @& g- }. A) V* G' x
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>% H* p0 a% v: B) C
, R" M) d9 d+ H2 N. V1 A4 l& A# H
<script language="javascript" type="">( b3 I- n ]& E
function countDown(secs){: D& d5 Q# i+ P/ {
tiao.innerText=secs;
o" Q6 i4 z, ]( B* b5 F
if(--secs>0)
* t6 a& K3 W6 X3 Z3 s3 y4 }
setTimeout("countDown("+secs+")",1000);) Y& G. e$ m8 U/ J. I" I( k- G
}; ]- V" A5 k; D4 i' U" G& A
countDown(3);
# s4 e' y) w4 r$ Y2 V1 r+ M' `
</script>
* s' T! n! u# j1 H0 r
$ x) E/ H8 K- P* R
</head>

复制代码

例6:

<head> 3 G' V5 t4 K1 Y" e1 m
<meta http-equiv="refresh" content="2;url='b.html'">
' l/ ^- J; Y2 {* b& K# R# S
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">
5 N, _7 _7 }/ |6 g
setTimeout("window.location.href='b.html'", 2000);
_6 @! I% T& K/ b6 r' c5 h! d% Q
//下面两个都可以用
; w1 |7 ]% _5 h+ P
//setTimeout("javascript:location.href='b.html'", 2000);3 N) q1 V0 y/ [* K
//setTimeout("window.location='b.html'", 2000); ~# m" V/ a8 T
</script>

复制代码

例8:

<span id="totalSecond">2</span>
7 w: R/ y: o2 ^" O: z1 {
<script language="javascript" type="text/javascript">' p- G7 M: `9 P, x2 f
var second = document.getElementByIdx_x('totalSecond').innerHTML;* o0 w1 ?! p- k2 h6 ?; q
if(isNaN(second)){
# K6 `1 b w& p. I8 i: T
//……不是数字的处理方法! `8 R2 R2 c/ _1 d7 v, Y7 o
}else{
# Z5 l0 k- B3 r7 @) [- I
setInterval(function(){
# D+ P! {- }1 @' O( |, C" ?' I5 a
document.getElementByIdx_x('totalSecond').innerHTML = --second;
' Z- S, {* v0 Y l! z
if (second <= 0) {
( d& o, S. [" R% k
window.location = 'b.html';1 L! T5 L j1 A9 g
}
/ t% v# c9 [. a/ u, E
}, 1000);& V+ P" v9 B6 p# m6 T
}
; V7 K2 {& W9 r& U! r
</script>

复制代码

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

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