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

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

1，只执行一次的定时器

<script> # b" v, }4 a0 C" G8 D, [
//定时器异步运行 : N7 |" @% X# Z2 W9 j A
function hello(){
: ~* N" Z+ c6 q7 c- Y O
alert("hello");
) U: x2 J' g; }: r' Q; _7 E3 }& u
}
# }: ^# X. l7 A! @/ W) E
//使用方法名字执行方法
' t& h7 n1 b/ O
var t1 = window.setTimeout(hello,1000); , m0 @4 e; \9 a. E/ [7 b
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 4 z; j J! O: Y# `. j, ]% {
window.clearTimeout(t1);//去掉定时器 + @1 X5 Z6 z# |+ T+ R! y$ `( O* \
</script>

复制代码

2，重复执行的定时器

<script> " Z" j' `2 X+ b9 v& ]
function hello(){
9 M' a7 x+ w+ M0 S
alert("hello"); & V' @$ q* U P' p& a/ v& {
}
5 Z' v/ d: h: |. U( R+ G% t- ?, k
//重复执行某个方法 8 f- l7 N% G" L
var t1 = window.setInterval(hello,1000); ) N' y& w, A3 j3 U0 v
var t2 = window.setInterval("hello()",3000); 2 Q" }2 S$ k/ M# D: O
//去掉定时器的方法 % S' T- g) B1 ^2 S8 T
window.clearInterval(t1);
7 R- ^6 ^2 I, G6 \
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);, _+ |: r# ?8 ~. M, d9 d( Y
2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成
]+ ^4 t% Z0 U“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。
; P; I; A9 c! l' k( i, j' m' N+ O　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。: u) c, @! Q- {8 }2 C; [, q4 L
比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，8 |2 u( |. r. W& L6 d" A
则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。
* n/ F6 Z: b# `/ S: h* {: e8 C比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。
8 {8 p3 `9 k4 `% a0 B* ~0 z8 o0 psetTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.8 l# c: @) S" L4 U
setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象
: V U% j0 @+ _* Y* sclearInterval(对象) 清除已设置的setInterval对象

略举两例。- ? Q. ]- i; S5 L r Q
例1.表单触发或加载时，逐字输出字符串

<html>1 j1 d$ J! k2 P) R$ P2 J: t
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 `7 }4 m6 ]7 l, z; u9 O
<title>无标题文档</title>8 Y& }% ^6 [5 U" H
<script language="JavaScript" type="text/javascript">
4 S3 S+ U8 L* a% i1 @7 A$ q
var str = "这个是测试用的范例文字";+ {( w4 s% h( h8 h0 A/ ~% p* Z7 X
var seq = 0;/ F5 ~; Y6 t9 L7 n
var second=1000; //间隔时间1秒钟3 s; P* u! z1 W" a$ ]
function scroll() {
( c" K# @& d# {- R- r" ~
msg = str.substring(0, seq+1);# y. S3 h" {% o! U
document.getElementByIdx_x_x('word').innerHTML = msg;
. T( Z$ _- N* N5 `
seq++;; A" @$ {' O9 O- B
if (seq >= str.length) seq = 0;2 J7 M& [- d( G; p M6 L
}/ ]) [8 ^, G2 W* P- z' M# |
</script>
3 _3 k) f6 e: j3 I! K9 O$ y3 R
</head>
& T2 g4 o9 }8 v6 y
<body onload="setInterval('scroll()',second)">3 O: U% Z0 J* d% J$ a# s* i, N+ t7 C
<div id="word"></div><br/><br/>5 V& T* D( n1 S
</body>
/ Y9 {3 h8 U4 S1 U8 x5 `% d) U
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">! e- U9 I$ v$ C: L! ~
<html xmlns="http://www.w3.org/1999/xhtml">
/ @/ v) ?/ k3 E7 l; A: E5 s6 N
<head>
% @2 V a; t5 t7 l( M
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
4 t6 S5 h( E) M: ]
<title>无标题文档</title>) Y I. Q' h4 Y9 {
<script language="JavaScript" type="text/javascript">
) g0 d. {7 s' b ?- p3 k$ \
var second=5000; //间隔时间5秒钟
+ M' D. B) T3 Q
var c=0;9 f9 A1 f2 h0 _4 Q
function scroll() {
" f% ~ Q Q5 {7 ?: t/ g! i- L* K
c++;
2 A, l6 V; J/ L) M6 M4 r3 |/ Y
if ("b" == document.activeElement.id) {' O% z* G3 s! o) z! v, |
var str="定时检查第<b> "+c+" </b>次<br/>";
7 ^& k" C& G/ G' b% X
if(document.getElementByIdx_x_x('b').value!=""){
! X- i3 l& A ^: C# K. D
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
- [% A U1 [. k
}: Z( A+ G) p+ Z% Z8 L
document.getElementByIdx_x_x('word').innerHTML = str;
* r7 D* ]3 o. V7 b: W- I5 [! Z; ?6 e
}
6 B x3 J7 @( _) d+ N
}. s8 g+ M$ v( F4 K+ E. n
</script>1 {3 C4 a/ \ n) W: o
</head>& L# C5 S1 u6 f0 s/ w6 {: Z i
<body>
6 {2 c! B( }1 M/ M2 s" q
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
q- ]! a I% p2 ]; {- Y' d
<div id="word"></div><br/><br/>
% H' w# [- Q9 n' s8 j9 x
</body>
5 E% o+ E# i' B* A: y# T5 Q$ [
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">
& U# E" ?( S m( ^) N) g
<head>
) S% l1 L6 V: M$ l7 \& u( e
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />- M) l" L8 \! y9 G' r- k4 i% }* q
<script language="javascript">- r) @+ ~( C' z. P- j0 b4 O
function count() {8 W) u2 i+ r8 q
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";0 L0 U0 D" M0 l1 P
setTimeout("alert('十秒钟到！')",10000): U) h0 S$ o( C; O; \ d7 g% X
}
0 Z/ m" Z, e$ P+ w1 w4 ]9 ]
</script>
) r, r" }# V! l/ t6 H5 X
<body> F# d4 N3 W% M2 l$ y
<div id="m"></div>2 Q8 j0 }; E: w9 V C) y
<input TYPE="button" value=" 计时开始" onclick="count()">
: Y$ q. i# R' B8 D3 }- M
</body>8 l) P; j. E t$ O6 v5 r+ [
</html>

复制代码

例4:倒计时定时跳转

<html>( t V8 D7 _6 g9 z
<head>
2 t4 V8 P! v9 h- t# l! v
<base href="<%=basePath%>">
; `) o2 h' |) F; L7 L g0 d5 X
<title>My JSP 'ds04.jsp' starting page</title> {* R) O- W# t1 o5 G% F
<span id="tiao">3</span>
1 P- _0 O1 f4 G* ^/ R8 d
<a href="javascript:countDown"> </a>秒后自动跳转……# Z# D" B7 {' f3 y4 e
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>5 q! Y2 k7 Y* n% h$ u+ g( D
# J) R5 E d5 S$ f
<script language="javascript" type="">) J0 W: `$ |5 J7 K4 P3 B |
function countDown(secs){% O. U$ O4 y l! V
tiao.innerText=secs;
, e; m% z5 U# z* d/ I2 P) m
if(--secs>0)) \7 j" L+ I2 {+ ]8 c/ x
setTimeout("countDown("+secs+")",1000);0 {3 f3 i0 J# H9 ?' K/ p
}. l* p. ?( z" K; m3 I4 e
countDown(3);7 T, ?/ d6 Y3 z# K( i1 _
</script>
% V/ l* u# `2 s0 N/ b& ~: _
, X z% [) c4 x9 m4 x0 l& N$ {+ g
</head>

复制代码

例6:

<head>
{$ s( ]) z) N
<meta http-equiv="refresh" content="2;url='b.html'">
$ p* |" g' J: h3 o7 X
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">
, I& O. o1 o5 f
setTimeout("window.location.href='b.html'", 2000);
) ]% P d- l: |5 C( [. \; |
//下面两个都可以用
//setTimeout("javascript:location.href='b.html'", 2000);: r" X6 l0 b( `7 a9 u& K# j
//setTimeout("window.location='b.html'", 2000);( M! j+ t9 d) }; X/ `
</script>

复制代码

例8:

<span id="totalSecond">2</span>
& d3 m2 y, d$ G+ N1 n! C0 b. b
<script language="javascript" type="text/javascript">
6 f* ~) e# Y, e- }# A9 q
var second = document.getElementByIdx_x('totalSecond').innerHTML;
" @( |+ T3 J+ C: }6 _1 k, k
if(isNaN(second)){
; c8 ]; M4 e6 o" C" L+ ]
//……不是数字的处理方法
% a" ]% G$ k7 T, H$ `; x$ r3 Q
}else{
1 V" R3 F7 O$ p5 Q: n7 V1 d
setInterval(function(){0 [7 x) b) [( ]+ M% q& \3 j- G% G
document.getElementByIdx_x('totalSecond').innerHTML = --second;
/ a& j% P2 x5 g7 Y) t
if (second <= 0) {
' n9 [4 @; x% Q( u( L$ E
window.location = 'b.html';
( G* M- O7 r* I+ O/ K4 p0 S( q. `
}. o. F$ L! H" p* Z0 s1 L/ J7 y& t# u1 c5 O
}, 1000);. v% I8 x7 Z, _" |# u3 |' t
}
; Y+ ~8 N& N! V. ^
</script>

复制代码

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

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