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

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

1，只执行一次的定时器

<script>
3 X9 p7 Q8 p$ c3 z
//定时器异步运行 ) i$ D/ [' l. M. S* W
function hello(){ ( E9 R. U, E$ t* }8 y( X
alert("hello"); - k- ^ w; H6 U2 i0 v3 P. P
}
6 @9 e% t' G" R& F
//使用方法名字执行方法
9 o+ F" U/ x4 L8 m
var t1 = window.setTimeout(hello,1000);
& n8 i' c6 i5 c+ [% O
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
! W, S& C& G" Z: m! n
window.clearTimeout(t1);//去掉定时器 3 |2 k# q5 _" y; L4 B! n
</script>

复制代码

2，重复执行的定时器

<script> 0 h# @' F% y* [7 E8 Z
function hello(){
: O1 r' {0 O) x0 Z0 J, f( p
alert("hello"); - m% p# k3 j S P* i/ E9 c
}
* d! z+ K* [7 p, l1 C }) J3 Z
//重复执行某个方法
, U7 v) J; |8 \* U/ `) C& b/ n0 q
var t1 = window.setInterval(hello,1000);
* E8 j# t% W. h
var t2 = window.setInterval("hello()",3000); ( c5 M1 R( o) ]; S8 s* _$ G5 p
//去掉定时器的方法
0 [* C, ~3 B! r/ g5 T7 a
window.clearInterval(t1); & S5 n9 R0 u. L
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);1 b' B( T( K) T- D4 E
2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成; W, X8 ]+ }6 e1 M: k) w
“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。
7 W; W4 O+ v) j' Q　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。* g: @5 Z4 o$ T# c
比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，- |# @& K3 l( [0 X. ^1 y! { [
则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。; a' L# s5 S/ \. V
比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。
( P! H2 I7 Q* ?' ksetTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.0 T, c: w; u& a v9 P+ ~
setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象
5 [" a6 g, ]8 U+ `6 a5 sclearInterval(对象) 清除已设置的setInterval对象

略举两例。# D1 E* ~1 C$ Y( i$ _
例1.表单触发或加载时，逐字输出字符串

<html>
& }, f, x) u( n: w; }
<head>
; p2 h1 X* u6 D8 k
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
& H& g# ]8 U+ k0 ~3 ~( U
<title>无标题文档</title>
4 c3 i1 Q' C2 k/ ^) k# e
<script language="JavaScript" type="text/javascript">
) Y8 k) k& F+ C9 \7 i+ E9 h
var str = "这个是测试用的范例文字";
5 y0 v! q2 F$ g! ?5 j o2 S
var seq = 0;
, R, Y7 n7 \8 w( J/ Q4 s3 r( g" P
var second=1000; //间隔时间1秒钟2 v: T0 a. Y }6 O4 \
function scroll() {! q- R' ~ |0 p- T. y9 p" l
msg = str.substring(0, seq+1);
3 q1 f* L" ~4 }
document.getElementByIdx_x_x('word').innerHTML = msg; ]- h: ^# A0 }' x. i' q$ {) Q5 a
seq++;
0 P; A( U9 s: q h9 H& h
if (seq >= str.length) seq = 0;
& {$ m5 J" G' r: t( u2 M# n( G
}
W3 s' [0 O4 l( k+ v ?. f
</script>' S( Q1 M/ F! I% _$ @
</head>
& `2 T5 |) `2 M7 g1 K: p+ x
<body onload="setInterval('scroll()',second)">
2 i5 H! ~+ {# x- |8 \
<div id="word"></div><br/><br/>
( A3 A1 T0 K4 r# }: y3 b* _
</body>
+ A0 c x; @3 j- g
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
8 T) w" v* v* U+ n' }8 _
<html xmlns="http://www.w3.org/1999/xhtml">
% T; l# V: t- p% H1 h2 T
<head>2 h8 D! V. J' ~# @# w; H
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
7 w# k! |- K% R, u/ w( e
<title>无标题文档</title>
9 K: `7 T; l! I! X: E2 g; S1 j
<script language="JavaScript" type="text/javascript">
) T+ @% \) T0 k& d, _
var second=5000; //间隔时间5秒钟' i+ s9 l6 b2 X- u4 B$ [
var c=0;* c9 {: {( m: b3 U: p' f& T
function scroll() {
, D6 w9 c3 \' T3 V, c
c++;
- u1 A+ S4 R, Y! J! n( ?7 S' U
if ("b" == document.activeElement.id) {7 j# n6 O7 r# {
var str="定时检查第<b> "+c+" </b>次<br/>";& X3 c& q" e7 X4 }2 [* A
if(document.getElementByIdx_x_x('b').value!=""){6 z7 c& N7 P5 X& O
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
! R) _7 a- l" d( n
}* y0 B) t y; {5 K! f/ h
document.getElementByIdx_x_x('word').innerHTML = str;
4 E" O G f; a y, @ M
}' }( u3 Y( |0 o9 Z
}
! b! M" r; @( H1 b9 S
</script>
! ]: U( u9 H, t4 u; {! P8 \
</head>2 G$ q5 n: D7 c8 w) S- r$ v
<body>0 ?. b! I; e3 }% h; U0 b. ?
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
, d: x, b8 l- U. ]& {. P
<div id="word"></div><br/><br/>
6 R/ a* D O- V- Y4 y7 k' C3 a/ a
</body>9 A0 v X& y2 o1 t" }( Y/ H
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">
% F4 M5 Q$ [ i# |
<head>( y* |: t% W4 C: U: q
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
/ D/ e! r/ q9 [: T; Q* G6 p3 | D
<script language="javascript">
. Y" m, b" E* x
function count() {
" l) a' A; y! b0 n; |
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";, ^ n1 C* F" [
setTimeout("alert('十秒钟到！')",10000)
3 U/ j+ V9 p$ _5 C, D2 V
}( o0 |6 |7 V5 }- t/ `( @
</script>
* m' q" X: Q0 V1 x5 k
<body>5 u: ^9 l# Q% g
<div id="m"></div>
7 f( `% X0 B# j5 V
<input TYPE="button" value=" 计时开始" onclick="count()">( W/ _- f5 z" d" F% ]8 {9 J
</body>
- v$ b0 w* R" h" l" h
</html>

复制代码

例4:倒计时定时跳转

<html>
$ v: v' _, a4 O8 Y# y3 t
<head>7 L( B+ @" j) s; ]- u- ^6 P
<base href="<%=basePath%>">$ ~! u! I/ ~5 y3 g( M9 y
<title>My JSP 'ds04.jsp' starting page</title>, \ @& m3 ]$ ]5 L
<span id="tiao">3</span>4 X# F8 j- u" v! X8 }
<a href="javascript:countDown"> </a>秒后自动跳转……
; \" ^9 S; \1 v8 ]. R
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>( W3 f' u. |' v$ Q
. r* E6 Q9 y8 {; f: e6 k
<script language="javascript" type="">0 P$ U& I. [9 w5 y# x, _
function countDown(secs){: P9 l$ Q4 N8 t5 y7 y
tiao.innerText=secs;; H8 V1 B! t1 b- { C' \
if(--secs>0)' W9 R i) }4 f& E8 ^3 f& e
setTimeout("countDown("+secs+")",1000);
3 J5 z. u9 |1 ]3 C& Z
}
: t* [. _. b6 w" ]( d% y
countDown(3);
+ W B4 d+ E' U& E& n2 Y
</script>
5 Q- X$ E+ p7 L" h0 U0 |& ^* t
7 W; ^7 z& x! V# P0 f
</head>

复制代码

例6:

<head>
7 j$ m9 g: ?$ S- @! \
<meta http-equiv="refresh" content="2;url='b.html'">
/ S' h. M) ]& A/ b2 n z) T
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">4 G/ ~5 B* z- a3 s! D, @
setTimeout("window.location.href='b.html'", 2000);1 e$ K' Z' i* p$ c
//下面两个都可以用9 ^6 x6 k% x1 u9 P( Q% R$ L
//setTimeout("javascript:location.href='b.html'", 2000);# d6 V) y, y8 S) Q
//setTimeout("window.location='b.html'", 2000);: O* K) u# P8 D: C) p5 A7 v A1 F
</script>

复制代码

例8:

<span id="totalSecond">2</span>" T9 X' G- r/ h% ]5 o, c ?* n
<script language="javascript" type="text/javascript">
8 z& N" ]$ h* I" t; s0 A
var second = document.getElementByIdx_x('totalSecond').innerHTML;9 F( R. U) l+ p% m9 F% V. m6 [- t
if(isNaN(second)){
5 |7 m/ G) S' a; i. r
//……不是数字的处理方法 J" F( m3 d* K# t' t; y) ~# z: ~% o
}else{
7 l2 N& _6 P/ f3 {9 L( [! J
setInterval(function(){
* e! d, L* v" p5 Z* J4 c4 ~9 s
document.getElementByIdx_x('totalSecond').innerHTML = --second;
2 W, Q7 l. V' N+ i0 R+ u
if (second <= 0) {; q: O* G; }" ] s
window.location = 'b.html';
' e* ~5 X$ G; p; E) f* R' @
}4 E" |( T9 ~" Z
}, 1000);) S& |& H' e9 G8 R
}
5 H$ C& e+ L% n- |% l/ V* c- V
</script>

复制代码

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

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

浏览过的版块