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

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

1，只执行一次的定时器

<script>
4 d% [2 a" @& v$ b0 h
//定时器异步运行
W3 o! X+ @) d3 m
function hello(){ ; A2 e/ a+ h- P+ c
alert("hello");
- F0 ]$ t# g- p8 I! ~$ `9 Y1 p
} $ m, ~% M1 B' F3 O; b
//使用方法名字执行方法 1 d, b' K; |. e& D/ d( q
var t1 = window.setTimeout(hello,1000);
# R8 l7 e# F/ B3 m4 K) }
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 ( z$ ^( M; C U* [0 Z
window.clearTimeout(t1);//去掉定时器
! O& z( K; H% d
</script>

复制代码

2，重复执行的定时器

<script> + C" D+ e' x- W6 m( q4 w
function hello(){ ! `9 ^! g+ X% m' n' b+ g& N
alert("hello");
8 ^3 T$ M! K. v
} 1 W9 g5 u3 `! ?8 v9 k5 V
//重复执行某个方法 * s5 I: a' L. A, I4 D/ ]) B
var t1 = window.setInterval(hello,1000); ! v& b; M5 O+ C- a# P
var t2 = window.setInterval("hello()",3000);
! Z' i: i1 N9 W0 m8 u$ U" V7 H$ B( x
//去掉定时器的方法
8 i7 t, V: Y' z- e$ b) }+ m
window.clearInterval(t1);
; U4 Y" f# r" s2 \" Y7 c5 _8 Q
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);7 e) C; v) N6 J5 S* a9 g& {
2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成
# V/ I+ o3 {1 O“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。! u2 c9 ^8 \) f: s1 }
　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。, ~! L `5 P7 e4 a) g6 ^3 }% ?5 k
比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，1 [" u& Q2 E2 _
则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。
: O4 I& A$ w1 b9 a6 t比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。, ~! y2 c5 X* N
setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.
1 L7 X/ P R- s8 dsetInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象+ g0 B. w7 ~; s: e& W( ~4 d# l4 W
clearInterval(对象) 清除已设置的setInterval对象

略举两例。2 K- K {. }% g! H+ `3 u
例1.表单触发或加载时，逐字输出字符串

<html>
- x/ X, ~) k. W+ @ {/ J1 a
<head>/ x) w2 }6 N: o3 x1 F4 Z
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
. M/ y$ i! V! ?9 Q
<title>无标题文档</title>
- i& B) h5 ^/ b1 ]' D: S
<script language="JavaScript" type="text/javascript">
% p: X6 F& K! ~) H5 H6 w0 J
var str = "这个是测试用的范例文字";& _6 X9 ]: O) O h$ I
var seq = 0;
" V& R* H/ @8 z Z* B0 k
var second=1000; //间隔时间1秒钟1 }& B7 W5 `" h2 Q6 W6 V
function scroll() {% W$ W& R' P A
msg = str.substring(0, seq+1);
( u3 a: d8 Z/ _3 O8 G" I3 J
document.getElementByIdx_x_x('word').innerHTML = msg;1 k: C, w6 y- c7 s
seq++;
) ?8 X8 M0 y- f1 D4 f
if (seq >= str.length) seq = 0;: @$ }: C6 @; |" G+ E( o4 [
}9 L* X! B. F7 k9 ?% P
</script>
: r F+ a; ~1 X. r" K
</head>9 s3 z; V: ~% f
<body onload="setInterval('scroll()',second)">
' L0 @! m& q! ~- u! ?
<div id="word"></div><br/><br/>
( |6 u& R! F+ ?; {, h! a6 [
</body>( ]/ G) W2 C( K$ ^* e B# J% s
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 `9 W! |* O# j1 @3 \
<html xmlns="http://www.w3.org/1999/xhtml">7 o( E* [: J0 s' Z4 a- c
<head>' y* c2 r6 H" b- Z' y: \, R
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />* y3 I( b6 n/ v# p5 M1 W6 ]6 j" b
<title>无标题文档</title>; Z0 Q+ I7 ~* B5 W( M
<script language="JavaScript" type="text/javascript">+ U l, ^0 V; ^+ v, q F/ Z; @
var second=5000; //间隔时间5秒钟' c0 o, }( G3 ]7 d: U9 O, }
var c=0;
1 K1 C( L6 A$ H; F$ Z- Y
function scroll() {
# k$ l- c: m7 k- X
c++;# i1 s& a7 P% d! m2 z# R
if ("b" == document.activeElement.id) {# f. C& ?* \# h- D7 R
var str="定时检查第<b> "+c+" </b>次<br/>";1 R0 W7 m6 i, T
if(document.getElementByIdx_x_x('b').value!=""){
5 h' l: {& I1 {: ?" S
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>"; c1 J5 n. ^, K& k& M1 l
}& d7 ]: Y, P) d5 D1 {& N- s1 S6 x0 X
document.getElementByIdx_x_x('word').innerHTML = str;
9 ~1 ~$ ^4 R, s
} }) d) b. L5 ^# W
}. A8 {, g9 }& O1 M; ]3 A3 o! D3 K; _
</script>9 T4 d% T. C# L9 w _5 r
</head>( C: o0 v8 S8 p" c! m' {
<body>
7 s3 M* g7 f4 o* Q. K) E/ K
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>& Z) o7 r' x0 n
<div id="word"></div><br/><br/>
2 N2 E `& H3 j# `4 E
</body>% }: W+ {* |, ]6 B* r7 y
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">
7 I0 | o, x- b$ ~$ E2 |
<head> B( T# k) R& X& `$ z" _
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
; d$ [' q' c7 E
<script language="javascript">
( l% Y9 l/ K# p6 I3 t
function count() {
5 e' k6 S+ u( Z: y* E! g8 y
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";
: [; f! O4 Z# w8 ]
setTimeout("alert('十秒钟到！')",10000)! S7 J* z$ y/ G' L
} y/ M' e) S7 y4 t9 b& p
</script>
/ \8 d* a6 R# U8 d" v1 V. X* A
<body>3 ], |7 {1 @4 ?1 ^
<div id="m"></div>
2 ]* u, V6 r9 m) ^% Z5 ]
<input TYPE="button" value=" 计时开始" onclick="count()">
* {7 \' t3 b' o8 ]% g4 P( J
</body>
/ U o" U2 Y9 S* q/ |% m# s7 ], @
</html>

复制代码

例4:倒计时定时跳转

<html>, h; p$ }- X' a# u1 l
<head>
& M. E( Y1 b; I4 a
<base href="<%=basePath%>">2 T5 s. e+ v0 x i4 Q7 E. S4 F3 l
<title>My JSP 'ds04.jsp' starting page</title>
1 i& M( [) }4 [5 U, h- n% D
<span id="tiao">3</span>
& Q b: T0 _7 V& d5 O9 J# J/ P% r/ M
<a href="javascript:countDown"> </a>秒后自动跳转……' U/ j! \3 i! p7 a. e" m
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>% d! v2 Q8 L" e, k4 k
. a o& |2 x2 C7 q
<script language="javascript" type="">
$ F! O( }2 }+ w; t, f* R" u! g/ S/ u
function countDown(secs){9 c/ ]8 _; l1 i- [* s9 b/ _
tiao.innerText=secs;( l5 f; H6 c" C$ h5 m4 D
if(--secs>0)' B6 `8 v4 r) O' P' K
setTimeout("countDown("+secs+")",1000);& I7 M: y( `7 i& K# t9 f, n" O- u
}
, Z, S$ m( D! D. M
countDown(3);
5 N* P' N4 m. V
</script>
4 Q+ N9 f) x" N( m! e9 r5 @
: z8 t6 @- ^5 b
</head>

复制代码

例6:

<head> ( |# ?+ T& q( x* y" y6 c* R
<meta http-equiv="refresh" content="2;url='b.html'"> 7 P4 y- x _" E+ P+ x
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">/ v5 p. c- k$ t& O
setTimeout("window.location.href='b.html'", 2000);: `% _5 h5 _! u; w; {1 k* y6 s* K
//下面两个都可以用0 |$ P1 N. p, y
//setTimeout("javascript:location.href='b.html'", 2000);
+ a6 v- _1 D; B, S( L5 {/ ?
//setTimeout("window.location='b.html'", 2000);
/ U7 [* D. N, A+ Q' f9 j, x
</script>

复制代码

例8:

<span id="totalSecond">2</span>
7 h# Y1 `9 I9 @! y
<script language="javascript" type="text/javascript">: K2 z- [7 G" x* T
var second = document.getElementByIdx_x('totalSecond').innerHTML;
2 ~9 b$ }1 E! }0 l- S& E9 V+ `8 r* ~
if(isNaN(second)){; P9 g, Z0 e/ d3 f/ O) L; k' k; d
//……不是数字的处理方法
9 n- D) w! b; A7 q3 \: d
}else{
5 q n0 [3 G" s/ i; j% H) E
setInterval(function(){$ p6 y0 K9 |$ a" H, B
document.getElementByIdx_x('totalSecond').innerHTML = --second;) _) J! ~! j b# Y Y; R
if (second <= 0) {6 X8 s) T- R( x
window.location = 'b.html';& M/ o; S- [8 V! H
}% ?, [# _4 x& y
}, 1000);: U ]' P* V! f4 y3 ^, |
} $ W: r; f' }7 p$ ^1 v
</script>

复制代码

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

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

浏览过的版块