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

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

1，只执行一次的定时器

<script>
& d1 C; U& T& P% T$ ?+ \( O8 W
//定时器异步运行 : W' K# v' v: r5 \
function hello(){ 0 b% n. B4 b! e7 k* B& m6 F8 m+ o: x
alert("hello"); 2 b0 |' N$ D! K. `' f0 g8 i' s
} * s9 j+ X, t e3 z' x+ `; D
//使用方法名字执行方法
! i$ k0 n, y6 R! I1 M! X
var t1 = window.setTimeout(hello,1000); . N. t: G- L2 l3 J* X
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 # r; Q( v1 O* S( b. M, Z+ X1 }$ O
window.clearTimeout(t1);//去掉定时器
+ ]2 H; v& O) x( `
</script>

复制代码

2，重复执行的定时器

<script> 5 {( c; Z- w# _0 W, @* W, s
function hello(){ - K* H2 s( T* H2 n6 r" H5 g- ^
alert("hello");
8 {4 p8 v& \; \) x7 u0 F0 f1 u
} + p( B, E3 \% _& s* L
//重复执行某个方法
0 e! q- |' f: N9 t6 {0 w$ F
var t1 = window.setInterval(hello,1000); 3 ~. Q9 r% _) G! |9 g! f
var t2 = window.setInterval("hello()",3000);
" ]3 i% u, v" W ]8 S6 f4 ?8 z/ G1 P
//去掉定时器的方法 " j$ u2 n' E) `- F$ d+ Y6 G
window.clearInterval(t1);
% C* q( k% U% N- V' E9 P
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);
& s7 r" F* f# b ]! h% E H" C2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成) S- j0 F# y, F u2 O3 n: @
“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。
6 a+ Z/ V; }7 _3 [, w　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。
( K( M- [$ Q0 T v7 M, B( e比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，
% G9 i/ N) t3 o; [# ]4 `% |则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。$ h" J5 p. z# n9 d( w) V6 O& a) K. L2 L
比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。5 a# u' C8 K u. R1 ]& X, b& Y5 `% p
setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式./ u$ [+ i5 @$ E5 u p
setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象. a' }& Y: j2 {9 ?2 M! J) W* u* q
clearInterval(对象) 清除已设置的setInterval对象

略举两例。
5 J4 w( V4 M4 q+ U% N: W r例1.表单触发或加载时，逐字输出字符串

<html>
3 } y4 Z, j. C) b8 |
<head>
8 p) h0 F/ r7 a/ ^
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- s6 d- F8 d p5 l# h* d
<title>无标题文档</title>9 b) A4 e, @7 Z( v2 I7 o
<script language="JavaScript" type="text/javascript">+ w0 L/ N# ^7 e3 @ r
var str = "这个是测试用的范例文字";, [1 b2 m6 e2 K, x; S m" R
var seq = 0;
7 w) }( g8 E) H9 F& `/ O. R- D
var second=1000; //间隔时间1秒钟
9 P: s) Y4 n; |6 Y) x; q
function scroll() {" D8 x: j$ e6 Z' B9 @" H& k4 ~; \
msg = str.substring(0, seq+1);
, b6 k$ p- h0 J( p& R
document.getElementByIdx_x_x('word').innerHTML = msg;
' Z5 f% a b& b# _0 ^
seq++;4 h! }9 q5 r/ Z& t C4 ?, T
if (seq >= str.length) seq = 0;; u8 |, {/ F" a) z" d
}- x# y% L. F3 x: ]0 O6 X
</script>* H+ ]) C' e" Y* T
</head>% F8 K3 t' u. o0 ?8 N
<body onload="setInterval('scroll()',second)">
/ U3 [1 Y9 J# |2 y& w9 W2 i
<div id="word"></div><br/><br/>
# q& T! x- C# S* D* b# ?
</body>
8 F8 N( P5 r& J
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> h1 B3 ~# v' w: I$ h( G
<html xmlns="http://www.w3.org/1999/xhtml">. _) V" O# R/ j
<head>
! `5 m r8 G8 }
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />4 g$ F3 V; F! X
<title>无标题文档</title>0 {- m5 Y r; S s8 ~% p
<script language="JavaScript" type="text/javascript">* Z4 |+ d' x- i' \
var second=5000; //间隔时间5秒钟7 K. {! ]% r y6 [1 _. m
var c=0;
7 x! l5 j, S# v+ @
function scroll() {6 J$ ~8 {0 z( T- ~5 R
c++;
9 `6 c5 @+ m$ e, K, R
if ("b" == document.activeElement.id) {% |1 O& _& F7 t
var str="定时检查第<b> "+c+" </b>次<br/>";
u: [: H, C( i' c9 w4 ^$ z
if(document.getElementByIdx_x_x('b').value!=""){
# r$ Y5 c( {9 p6 b G" o2 C8 r; z
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";% R. @5 d6 k' s- `+ d Q( \
}: ^$ b/ z2 @* |4 B3 R
document.getElementByIdx_x_x('word').innerHTML = str;0 H# V* c# m8 I) Q) ^/ U
}
$ Y* H5 h8 ?6 |; `$ Y" Y
}( w- k" \- l/ G, W0 P: h) ^( Q* a* ~
</script>
7 x0 H6 r& P9 h" `
</head>
4 @, [' H. t ^2 j
<body>
9 g: A; c; @/ K
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
1 A1 i. h% ]/ C, J' u" x
<div id="word"></div><br/><br/>
% W* y2 r3 _* I6 m
</body>
2 d0 @( \) A, X9 }
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">
+ s+ f3 A7 v4 p( o0 S
<head>
" t0 ]' N7 T, z [3 D1 b" v2 J) u
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />, |( [* h2 u' R' N1 m% ^% ]
<script language="javascript">6 z2 \4 e5 c9 Q% Z' k
function count() {5 f* b" t+ r( [' k
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";7 _5 B' R' r! ?- l7 I2 K- S& M
setTimeout("alert('十秒钟到！')",10000)% M' }' u1 E" A
}
* }6 G% d6 g# M
</script>
6 C9 j& \. ?4 J5 l
<body> x/ W5 A# X4 ~1 ~% A! G( Y
<div id="m"></div>; d* b$ B( t* y$ |9 Z' ~
<input TYPE="button" value=" 计时开始" onclick="count()">- G2 }# [- @! g8 N5 A, V% z
</body>+ a# f& i9 S. _( [ S
</html>

复制代码

例4:倒计时定时跳转

<html>0 h4 B; ]0 j, x. [
<head>
+ s& ]( s" k+ F, i' S
<base href="<%=basePath%>">0 E0 g2 [5 Z' T: B8 y0 K1 M
<title>My JSP 'ds04.jsp' starting page</title>
: L4 o( X) ~( w
<span id="tiao">3</span>
/ V4 G9 H& h& S1 b# M4 \. I7 U. h- G
<a href="javascript:countDown"> </a>秒后自动跳转……9 A3 L8 O/ h) l; ]
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>
& i" ~; S% F4 ~0 W
, a5 U/ f2 d- l4 R
<script language="javascript" type="">7 U& |% K) ?# x; R) ~, H: E. X
function countDown(secs){
# F% D( J, Q: t$ `3 [
tiao.innerText=secs;( f% D- ]' t( V5 I- v5 v* T2 q/ P( Y8 J
if(--secs>0)
L' W9 @) n3 w# B& b9 ^
setTimeout("countDown("+secs+")",1000);, q4 r3 d' z6 k- n. k3 l* B
}6 l8 Z- k8 G7 H& }/ z
countDown(3);
; ]& T# `* c' ?+ T$ I* m
</script>
( [# K& D, r3 g: g+ {" Y6 ~ I, p
' D6 O0 u2 s% q" |' e. \
</head>

复制代码

例6:

<head>
; t% o$ x2 ~8 K c- P7 J
<meta http-equiv="refresh" content="2;url='b.html'"> " S- c2 K/ f: M- y6 i
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">0 F8 U6 C. V. r
setTimeout("window.location.href='b.html'", 2000);
: f' [2 B) w# _" a% t
//下面两个都可以用
9 t- T5 A9 }( H* u! m: Q
//setTimeout("javascript:location.href='b.html'", 2000);) Y B. f0 n |3 C/ d9 a
//setTimeout("window.location='b.html'", 2000);$ s- H1 ?' c1 `, m- i: ^# D% N- g
</script>

复制代码

例8:

<span id="totalSecond">2</span>
. r/ ?; }. w$ P; k5 w: a6 n
<script language="javascript" type="text/javascript">
0 B! U0 R0 |5 t$ P% B W: L4 ]' [
var second = document.getElementByIdx_x('totalSecond').innerHTML;9 \$ {7 u: a8 H/ D' L
if(isNaN(second)){
8 F, T$ ]' _/ _
//……不是数字的处理方法
& X1 d0 u; t& r" n: s$ t9 I
}else{
' G" v0 u2 _+ E
setInterval(function(){
4 e+ P0 O9 \; ]4 Y* e
document.getElementByIdx_x('totalSecond').innerHTML = --second;
9 W. Y4 O# y/ q* d4 ?
if (second <= 0) {" c5 d S: M( z& w ?0 n. A
window.location = 'b.html';
# K8 s2 \* U3 c; Y
}
: [8 W. a% @% a/ C% V' }& U
}, 1000);
+ X* {" Q" L1 |
}
; ?- d5 p, O- L
</script>

复制代码

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

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

浏览过的版块