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

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

1，只执行一次的定时器

<script> 0 }4 D& o# }) Y/ v! m
//定时器异步运行
/ |9 a' A% a% n
function hello(){ . m0 G% g6 C }
alert("hello");
; |- L( _, x1 i
} " @4 b6 }) H2 X) K6 G
//使用方法名字执行方法
`6 _; p, ~+ S$ X- j
var t1 = window.setTimeout(hello,1000); ; I! F: r& V) @
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
6 c7 P. J s4 L- K0 g) j( O: o, ?
window.clearTimeout(t1);//去掉定时器 , P# B+ E- y9 e3 C7 R
</script>

复制代码

2，重复执行的定时器

<script> , G- e9 w, p) {( h, L) K+ Y
function hello(){ ! G6 `" w* F% f& I/ T! g
alert("hello");
, l. l4 U- K4 K: N
} : r1 c5 ~2 [5 Y# m( x3 c, R
//重复执行某个方法 % ^. @6 B% R& f3 F/ f4 a7 u
var t1 = window.setInterval(hello,1000); 1 H8 h* \7 e4 z& a+ q8 ~$ S/ `
var t2 = window.setInterval("hello()",3000);
! F0 ?5 E/ Q: W4 x
//去掉定时器的方法 : h/ m) ]# D3 m' B+ I* S. U# A+ B( L4 h
window.clearInterval(t1); % B, Q7 ^5 i( Q
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);
5 F* W- A& I+ }( k8 J2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成
* o+ _) {" P2 V. M/ u" y“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。5 J# A' Q0 m0 n6 @
　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。8 _6 W" e+ t0 K& g" |; B( X. ]( {# I# d
比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，5 A8 m5 V) V! t/ j2 L$ \% x9 G! n
则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。
! y! v7 Q+ D7 s' d8 O9 U3 y比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。
Z+ ]2 a2 Q* E; N& v& \! i' ssetTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.
/ w" Q5 s: f/ F8 FsetInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象
~ P- D. s" W. ~6 DclearInterval(对象) 清除已设置的setInterval对象

略举两例。& i6 u/ ~1 Q4 D' ~* v3 z, B4 a4 R
例1.表单触发或加载时，逐字输出字符串

<html>
* l2 O3 [5 Z/ J u8 u
<head>
$ d# [; H+ h# M4 J/ x O
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
) |6 t$ q5 ]7 N' G2 U
<title>无标题文档</title>& ^8 g! ~2 u3 @
<script language="JavaScript" type="text/javascript">+ X: D' L a6 T% T* \% b" A
var str = "这个是测试用的范例文字";6 o3 e% v' q$ f$ _7 h$ s
var seq = 0;
S w. H& U' ~2 x; e- F) B) L
var second=1000; //间隔时间1秒钟: n! N7 m9 Y7 ?# R9 K4 z6 c! \7 t O; S
function scroll() {
/ n5 I- N) J5 k6 U
msg = str.substring(0, seq+1);
$ H" k* K+ G* w; T- l0 [+ {% `
document.getElementByIdx_x_x('word').innerHTML = msg;- d) s) n7 S; L/ P
seq++;
5 g0 F7 |9 }( e$ y
if (seq >= str.length) seq = 0;
& T @8 E! J) _% g% D' |
}
5 U. o4 L/ w, x h& k2 n
</script>
, M$ k" u1 v* \" E7 d& C; B1 }1 F
</head>
# E! \' w, A' n) s: l5 {
<body onload="setInterval('scroll()',second)">
# Q8 h6 B. P) L; X
<div id="word"></div><br/><br/>
" i) W% B9 k. D2 L; e4 k
</body>
3 O! ?; H, h$ {& d+ w, B; t& R
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">8 k& O/ I: h* v# o+ L
<html xmlns="http://www.w3.org/1999/xhtml">. b5 s& R* {7 W. O/ D, S
<head>( F/ e$ ~, M1 I# Q6 w
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />9 n6 Y$ u+ E, E! d
<title>无标题文档</title>3 z+ G* U4 O# F. M$ _% p
<script language="JavaScript" type="text/javascript">
* K9 j( d2 b0 N0 i6 _- f" V# m1 s
var second=5000; //间隔时间5秒钟$ U% m. K) t2 @
var c=0;) d) F( P5 A2 w, G
function scroll() {
- x, \% d# C) q5 ?; y$ ~0 Z
c++;8 ]" v6 e& w3 p: i8 ?) v8 e
if ("b" == document.activeElement.id) {
: A& S" D: z+ ^. u
var str="定时检查第<b> "+c+" </b>次<br/>";1 u/ i- s9 p% U' B9 C
if(document.getElementByIdx_x_x('b').value!=""){
0 }* W! }( | w9 M
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
. X _9 N3 x3 W) {/ V
}
! T4 O3 @$ |9 [$ D3 J9 h
document.getElementByIdx_x_x('word').innerHTML = str;
% t: E3 g& n6 v( [, L) {; Y& t
}
& t1 [5 f- B B1 F# m# m8 q9 @0 w
}
) ~) {8 C/ i! @) T# s1 j$ q
</script>
; Z, _* X1 J$ X7 y+ }3 H; |
</head>8 W f8 S! ^1 v. {$ a" o+ M
<body>$ D/ {9 M6 n# w3 V6 X8 ^+ W
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
/ w+ X" \7 k6 q2 _0 Y
<div id="word"></div><br/><br/>( R; ]* C- i+ _4 D
</body>3 |) Y- ^% e' H7 {6 M! V. t" V
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">3 p6 E l& w8 e9 \' j
<head>
3 I5 N3 n/ V* ?' [
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />* k1 d5 `( T+ H0 Y* i
<script language="javascript">
5 a H0 `! {& [/ y4 R
function count() {
* c+ P; w5 G5 K. X, c+ Y# S
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";
# F8 T7 G" l( _& F, Z
setTimeout("alert('十秒钟到！')",10000)
# e+ |- I+ [) r
}
' h( b5 M" m2 Q" O, A
</script>
* O+ |8 `$ c. N. s
<body>
& z0 `- D2 O' d$ @/ K9 P- o; _) E
<div id="m"></div>9 H M1 a! n3 D" i5 Y# |; m3 d
<input TYPE="button" value=" 计时开始" onclick="count()">0 ^9 V; a G# h# x7 Y
</body>
; y L- D& ?, n1 h4 ~2 I6 z3 \
</html>

复制代码

例4:倒计时定时跳转

<html>
. @! j+ t; F/ S3 B0 D
<head>
0 l: }5 B$ K8 q7 F& Q
<base href="<%=basePath%>">
$ W! w1 T* q' M* j. u4 {
<title>My JSP 'ds04.jsp' starting page</title>
8 f9 w' | r6 ]6 y! G/ y8 ?6 k
<span id="tiao">3</span>
# F, ~+ ~0 Z. D/ ?
<a href="javascript:countDown"> </a>秒后自动跳转……
- L8 t$ {& }! V9 m5 x0 o8 I
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>5 Z: ~$ Z; L9 L4 K+ R) |' Y; c1 P
# R3 p, u5 @/ s. Y1 o! e7 Y
<script language="javascript" type=""># _! I6 j6 B( W9 W' o2 c9 d
function countDown(secs){7 l$ x" f Z8 g5 U
tiao.innerText=secs;
* Y! ]9 g7 _. x' y/ m: D
if(--secs>0)
, x" W+ h: U( L2 Z/ |2 a
setTimeout("countDown("+secs+")",1000);
, V0 S0 o" B K$ \4 x! j: [
}& t* J7 h* J/ T1 A( [! x
countDown(3);; S9 j1 O3 z: w% H: w$ i
</script>
* Q0 L! c6 o2 Q- a7 D$ M/ D! \
5 L- Q! P& D2 Y* S( c1 V
</head>

复制代码

例6:

<head> 0 d1 R0 g. |9 T- w* p3 D
<meta http-equiv="refresh" content="2;url='b.html'">
* j& Y$ e/ s5 A' T
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">( Z0 i. `2 f. V* A3 W8 h
setTimeout("window.location.href='b.html'", 2000);
9 D: P3 H- a# E2 |( k
//下面两个都可以用. \3 d, N/ t% `6 U+ [+ G2 _
//setTimeout("javascript:location.href='b.html'", 2000);6 ~% Z0 O7 y' @; N
//setTimeout("window.location='b.html'", 2000);
5 y) I7 ?% i- J$ ^' d% V2 M
</script>

复制代码

例8:

<span id="totalSecond">2</span>
7 w5 a; D4 K! K8 L8 W7 h( i
<script language="javascript" type="text/javascript">
T7 L* W$ p* @; o! T2 s
var second = document.getElementByIdx_x('totalSecond').innerHTML;
% Z \6 \$ w2 ^) m
if(isNaN(second)){* g: P) S8 ^0 L# }
//……不是数字的处理方法
( Z( z% t K, r6 i [
}else{" H# A2 [3 v+ C' c$ ]+ P$ l! \
setInterval(function(){4 @# c' W; ?: f+ p/ W# S( u
document.getElementByIdx_x('totalSecond').innerHTML = --second;2 i+ Q8 F6 x6 E4 ?
if (second <= 0) {
! [4 d/ G8 P% L7 K# R1 ?! z& R
window.location = 'b.html';) @; @* U, z+ x* E7 x
}
. b, V# Z: v1 m. ~
}, 1000);
8 x& V: A/ Y8 x9 w( p
}
& I8 ?+ ~, j# m5 Q) |( u, Q
</script>

复制代码

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

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