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

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

1，只执行一次的定时器

<script> & H d5 Y$ R6 v# ]
//定时器异步运行 + R* F m& ]) @. j; r# [" X! t; d
function hello(){
. D+ c1 P, h5 R* J
alert("hello"); / w( W+ f2 I7 h% y$ F( H
} 7 L7 H7 E( x) v4 j$ m: g* U
//使用方法名字执行方法 ( _) V R7 o j( T, }/ N
var t1 = window.setTimeout(hello,1000);
% O! I T% Q3 @; \; t
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
( k! s* ~* V; s& w: y+ a
window.clearTimeout(t1);//去掉定时器 7 x' `- K8 m+ Q* u0 b
</script>

复制代码

2，重复执行的定时器

<script> . z; k2 V/ b" s5 Y U
function hello(){
|; S2 \1 c+ _$ J2 T9 R6 Y
alert("hello");
; y r: H1 e( r
}
3 B4 c. y4 T4 W
//重复执行某个方法
6 j/ \# E# L, g& h# j
var t1 = window.setInterval(hello,1000);
) u3 B& @. M6 E* G
var t2 = window.setInterval("hello()",3000); " g1 C; t0 O7 ^/ s) Z
//去掉定时器的方法
8 I7 y R2 F& V/ X! ?- q5 ~
window.clearInterval(t1); 5 _# s& W @$ V8 I, J5 G. B
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);
+ H) U% R$ j! S7 z8 k, ^, G( }2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成
. M' y4 F& u$ O6 |( q; U; e“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。
* R! u$ k7 |4 R5 K　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。
! X; @9 Q. J/ x" U7 F0 r- a4 O+ n比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，
6 v1 o; r2 p0 z A2 x/ `# Y* @则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。- w0 x+ b1 O, b
比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。! B2 G$ S- m* f8 ?( i6 P
setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.9 L9 P1 i/ \* ]8 E5 v2 I; q
setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象
3 a8 q9 F" i. u+ \6 Y% uclearInterval(对象) 清除已设置的setInterval对象

略举两例。
1 Q1 w# v& c! ^1 q) t2 q例1.表单触发或加载时，逐字输出字符串

<html>
# p1 L/ U" r/ k; x- f/ v1 T
<head>
: B- \8 |/ d/ N8 R6 B, v8 g9 t
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
2 a$ ^2 G+ v+ q9 i, S* z |, |- e4 ]
<title>无标题文档</title>
( n' p& z( @4 S' a6 I
<script language="JavaScript" type="text/javascript">
?0 j5 G1 ~2 ?0 i4 F
var str = "这个是测试用的范例文字";
. X* t& x( w0 g( ^
var seq = 0;: t) \9 n* @/ K1 a9 R
var second=1000; //间隔时间1秒钟
& p5 h& P9 N8 Z4 J0 }
function scroll() {9 ?2 }! s) L, h7 `4 F
msg = str.substring(0, seq+1);
% y1 w7 Z" ~# V: N% v- c3 N0 S
document.getElementByIdx_x_x('word').innerHTML = msg;3 g% O8 m/ ` L8 }- D
seq++;
" N1 J& t6 B7 Q1 W: R: `
if (seq >= str.length) seq = 0;
2 F1 a/ P3 M2 T/ O3 k/ w
}
, z: b8 ~7 i l% s6 R5 H& }! w
</script>/ T6 \ P; d, g4 C+ k) _" L6 ~
</head>) H# k) U5 u. v* ?0 q& H* p
<body onload="setInterval('scroll()',second)">4 ]- A# V( p6 O+ W4 o
<div id="word"></div><br/><br/>
& J, @: Z; J6 U, U: O
</body>" A8 F9 ^0 v, Z: Q& S, [
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
6 y" o* A% U- |. u# @: B$ M
<html xmlns="http://www.w3.org/1999/xhtml">$ f$ b+ v9 \; ?1 P: {- w4 M9 J
<head>
9 B' d$ N% p& C' @0 c- x
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />4 o2 S( Z8 U _
<title>无标题文档</title>
# \- P/ c6 j3 }' B
<script language="JavaScript" type="text/javascript">
% U! i( [' b" _6 M' i$ M
var second=5000; //间隔时间5秒钟( O* @. {9 q5 F
var c=0;2 P4 u4 r K `5 h/ S' V6 _
function scroll() {. ^* A/ M$ e* ]( w; b1 [
c++;) z. v( Z5 k! o' `2 ^) E
if ("b" == document.activeElement.id) {
\( }$ {3 k; [& _
var str="定时检查第<b> "+c+" </b>次<br/>";1 ~3 K6 E) L5 o" v) A
if(document.getElementByIdx_x_x('b').value!=""){
" P" {0 F6 j( t: F% c; w
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
- z! I2 z% l& T6 F" g0 X0 t/ |3 ]
}
: A$ a2 A9 a! b* [
document.getElementByIdx_x_x('word').innerHTML = str;
~+ t' F$ s4 l1 [! S0 ]% T; u2 a
}( D4 C& E* P! F D6 `3 x0 K, e. Z
}. _* D; c" A8 C( B, E" |- W, d; W }
</script>& n! `' O3 `, u/ _) n
</head>
% o2 S- \, Z5 r3 H9 \
<body>! ~: x3 G" ]: h& P4 Q8 L2 y( u* R
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>( e" ]1 e( i) T
<div id="word"></div><br/><br/># p: O3 Q: L* A
</body>5 a% y" \$ L# ^2 m( @+ r
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">
2 M* o+ @7 n# a# g1 G; G N, q) L, A
<head>
! w% Z; A# Q0 _) ^6 {
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />! C7 w8 d* h5 V3 [7 `
<script language="javascript">1 x# E9 \/ t# J3 ~) V$ j
function count() {
/ Z" e7 v+ p) p% `' H
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";( Y( w6 v H; s5 H; E
setTimeout("alert('十秒钟到！')",10000)9 Y( W( h \* z8 {5 ?4 h
}
8 z/ U; C# ~5 ~7 D/ b) Q% a
</script>
% _ P4 }7 R7 W; {8 V# {
<body>: o* U% a( N1 R; T
<div id="m"></div>0 K, W1 z. L0 l4 Q/ W
<input TYPE="button" value=" 计时开始" onclick="count()">$ a4 u9 O& i1 x" H6 d( s
</body>: @7 _% G7 w7 N
</html>

复制代码

例4:倒计时定时跳转

<html>' U4 T. x( z2 a5 Z% J6 C( P
<head>' A9 I6 i5 g' N
<base href="<%=basePath%>">" b, b) {3 l7 s) a# D
<title>My JSP 'ds04.jsp' starting page</title>
: t! p! [; w" i2 n. W: h$ N
<span id="tiao">3</span>1 D. t0 D% u4 M0 F4 K0 M8 d
<a href="javascript:countDown"> </a>秒后自动跳转……
/ n3 s2 _: e4 \% D# Y$ p# _
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>
# _* J+ c! q5 A& _5 ?+ K2 X
% A3 \: s1 M" @
<script language="javascript" type="">
, b( p! \1 \0 l' T% M: |7 U& c
function countDown(secs){
6 b1 }' T6 U& M
tiao.innerText=secs;
& q) U1 A! A% C% b- u- o
if(--secs>0)6 H! Q6 ], d7 |4 m5 c. a/ N
setTimeout("countDown("+secs+")",1000);
5 A6 W* G( I( P& w
}. J: A% C! u q
countDown(3);% ~6 c' ~! [( a, P _1 N
</script>
% q9 x: I# I6 v' X) t2 ? @) X4 p
: F( Y$ J( A4 z0 U- c3 T5 T( F
</head>

复制代码

例6:

<head> 2 f9 ?/ n* U5 I/ v
<meta http-equiv="refresh" content="2;url='b.html'">
& G5 C7 v4 O9 q
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">+ A& s* W" N/ e4 I
setTimeout("window.location.href='b.html'", 2000);
6 \3 k. F6 ]) Z7 `$ W7 P0 x" E
//下面两个都可以用; L3 g0 M: y$ I: Y! X f7 n
//setTimeout("javascript:location.href='b.html'", 2000);
; F( X( I5 s6 L$ E5 L
//setTimeout("window.location='b.html'", 2000);. ~' n$ z9 V- E6 X# Q6 s* \! }3 ]
</script>

复制代码

例8:

<span id="totalSecond">2</span>
9 |, g+ `1 `1 A5 ]; ^* K& v
<script language="javascript" type="text/javascript">
! ` g8 [4 [ T0 t6 D" d
var second = document.getElementByIdx_x('totalSecond').innerHTML;! k0 F4 I m6 A* I
if(isNaN(second)){! J3 ^8 P' |- I: r
//……不是数字的处理方法! S" G0 ]5 m3 z# O
}else{: m1 W. h/ z/ Z" U
setInterval(function(){! A% O& C! @$ j' y' \" f. Y
document.getElementByIdx_x('totalSecond').innerHTML = --second;( Z( p: ~) @& F/ t
if (second <= 0) {
& Y; {) ~; H: e' |# V
window.location = 'b.html';# r$ f# u' l+ h# o+ m R S
}8 r3 ^7 R( E, X5 B) R
}, 1000);
7 m) `- U }' Y4 N% R& d
}
! q1 S/ P4 K9 A" H1 Z( w& \4 @" n
</script>

复制代码

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

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

浏览过的版块