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

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

1，只执行一次的定时器

<script> ! X/ `5 }. U; I% e
//定时器异步运行
7 x% v5 w! h! X& ^0 H
function hello(){
8 N. d6 s1 c) [) X# k, Y5 v
alert("hello");
- ^ L) Q! n1 B2 o; @, _! w
} # K6 v% P% c; G, H
//使用方法名字执行方法
/ c" A4 w1 L! K W3 i
var t1 = window.setTimeout(hello,1000); 7 V5 S- f {% Y# I5 Q: ?' M
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
: \9 N# q; k$ o: B1 A
window.clearTimeout(t1);//去掉定时器
- H' D4 {( j1 X( V
</script>

复制代码

2，重复执行的定时器

<script>
$ b7 |. Y; H, w5 x9 T! K2 J- ]
function hello(){
4 {! Z6 T! V2 V6 f0 V" ?
alert("hello"); r7 V- P0 v5 ]
} , Y# ~, f* s! }, [. G
//重复执行某个方法
$ h- R" o4 G ^' Y" X* }
var t1 = window.setInterval(hello,1000);
k$ V2 B" K& k: t
var t2 = window.setInterval("hello()",3000);
$ _7 S, e) U* O6 ^- t
//去掉定时器的方法 7 ~# R0 \2 @: N# J' @$ P
window.clearInterval(t1); % j; ? }% M* Q
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);
5 [* i. X1 ~" W" Y* H2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成( C7 q5 Y7 l4 r$ B1 e- A
“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。0 b; e5 K4 j% E8 e) ~& ~
　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。! \& b% U6 r/ ^2 B0 X& ?
比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，1 v1 Q( a, l N1 b
则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。
8 q" f1 l9 y% f8 S( q/ j0 S比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。( E% H( h( J0 Z# b# S* Y$ R F
setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.- ~7 H- T4 ]. C& s
setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象3 h5 H4 G+ ]& E
clearInterval(对象) 清除已设置的setInterval对象

略举两例。
8 L3 h# b$ S( F例1.表单触发或加载时，逐字输出字符串

<html>8 L9 p. J& p0 ^- @( Z- D
<head>6 h: N1 g7 g( G$ _% z% C
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />- k, ?; A* a) @- A& b
<title>无标题文档</title>: J3 r3 o3 F+ J7 B2 B" ^* k% y
<script language="JavaScript" type="text/javascript">6 l0 I" F5 k4 |& W9 A
var str = "这个是测试用的范例文字";
/ e% M- i/ d/ k7 Y J
var seq = 0;
# _9 H9 e) ~ Y+ K
var second=1000; //间隔时间1秒钟2 Q4 p R) c2 D
function scroll() { t/ D) ^" w* A
msg = str.substring(0, seq+1);& x0 ~2 M) [* {5 o$ f q
document.getElementByIdx_x_x('word').innerHTML = msg;
6 G! k- ~. K: V0 f
seq++;
9 H& C# p' T* T1 u4 i; r$ M
if (seq >= str.length) seq = 0;
8 ?( U0 j' K) `, L
}' T3 _$ T" y: V6 c
</script>
( v) J; i4 r. p$ {
</head>
; u1 i: u f; h
<body onload="setInterval('scroll()',second)">
; a" E( m/ y, H. b! B5 y
<div id="word"></div><br/><br/>
9 {1 Z; U# A8 }, [, @( K
</body>
. ~ C- D% h5 q
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">. |" h' E9 n7 J3 o, U/ D
<html xmlns="http://www.w3.org/1999/xhtml">8 ?5 D. V9 C; K* r. g. f. q3 r
<head>
; v1 h K8 c$ u# t( X2 u+ l" u
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
! m0 ]2 {: W0 U5 N/ B3 x8 T! [1 l
<title>无标题文档</title>3 b3 ]* I E* F% h2 _7 R
<script language="JavaScript" type="text/javascript">3 y. F- o% V1 r x: b" z
var second=5000; //间隔时间5秒钟: @0 A4 J5 x- |% M/ d6 E: p
var c=0;1 x" Z( `$ H6 B, s5 [1 D5 u
function scroll() {2 `1 ~4 w4 V- H/ W& V( O- u
c++;
8 C0 h5 k7 M- w( v4 i
if ("b" == document.activeElement.id) {
/ r& E4 [8 l1 I" I2 _8 ^6 z
var str="定时检查第<b> "+c+" </b>次<br/>";7 [$ [8 b1 q9 ]
if(document.getElementByIdx_x_x('b').value!=""){
7 {& L" t, M- H" O( P# ?# M
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
5 M9 P0 v9 f! ]( w/ T
}
% s- z* \3 g* K$ _
document.getElementByIdx_x_x('word').innerHTML = str;4 F; m, ]- q5 V- ]; O
}
& l8 }& i V N: ]# ^: Z
}; [: W7 v/ X: T
</script>; |# x( [" I9 ]& B/ K
</head>0 S- T4 E2 T! ?
<body>; P( ^% [ ]+ H" j1 W2 e8 c
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
<div id="word"></div><br/><br/>
2 ~; o# V+ q- r! f5 w
</body>- b* C- s1 T3 B' M8 B
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">
1 G+ i! \. O/ Q3 ~$ w
<head>
6 r1 R% f* o" Z: ~
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
) R1 I: w; a& a" F# `1 D
<script language="javascript">8 [+ c; e: v- _
function count() {% a/ C+ s4 b, _* q( @& s( n
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";+ o$ E0 g N2 s9 g5 v) x0 |+ H
setTimeout("alert('十秒钟到！')",10000)
3 j: |2 k) Y: P! a
}/ ^. {6 O# d$ f% s, P7 c+ M) D7 I" u
</script>! I5 R0 Y# U% z' N
<body>
( w" G% Q1 F& B
<div id="m"></div>* A4 b( t; M1 V& H" G$ I; C
<input TYPE="button" value=" 计时开始" onclick="count()">
5 P0 d+ Z- R p3 _4 d
</body>" u9 C! h3 [' L
</html>

复制代码

例4:倒计时定时跳转

<html>
: s8 E* q' F, @6 s" Q
<head>
* J) |, r/ h1 W8 S) P3 ?# D2 d
<base href="<%=basePath%>">
( ~! |) F1 @% I8 m' B" D: Q
<title>My JSP 'ds04.jsp' starting page</title>
$ H, R2 k) m+ X8 \. f) [7 g* ]% k
<span id="tiao">3</span>
2 F+ y4 _5 a6 D9 H$ A) K
<a href="javascript:countDown"> </a>秒后自动跳转……; f" N/ L5 ~9 D4 G' n- {
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>
; Y) P( B8 j& a
7 W$ ]2 N+ l7 u# I& b8 |* {: z8 b* a- D
<script language="javascript" type=""> |& n+ }) O0 h: f; @! J
function countDown(secs){
3 k. t+ ?' O) U, X0 n/ B) Q
tiao.innerText=secs;
( r8 z- a7 A' }( D |' m; @: \0 {
if(--secs>0)
6 _. w& K4 x+ j/ k a$ F& [) H
setTimeout("countDown("+secs+")",1000);
- V# t) r. }/ C5 O
}
. D/ S/ A. ~5 t1 |
countDown(3);- x7 a$ m) E( g
</script>
0 R+ s1 ?# k& F, g& q' I
& \) o2 C1 D, Z
</head>

复制代码

例6:

<head>
5 p; t1 ?* X- }9 S) h
<meta http-equiv="refresh" content="2;url='b.html'"> : j4 C: f0 `/ X9 j" K% b& Q* L1 a$ L& u
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">
# ^, I. w2 _2 t% s1 P( C
setTimeout("window.location.href='b.html'", 2000);! d& {: I+ T; `: o k; T; _$ C \4 h
//下面两个都可以用
$ ] p# y9 Q. A& Y
//setTimeout("javascript:location.href='b.html'", 2000); }# Y) L$ u# C! j, D
//setTimeout("window.location='b.html'", 2000);0 w% R1 f' J* m9 {6 f2 j
</script>

复制代码

例8:

<span id="totalSecond">2</span>) X, M5 L/ r6 h
<script language="javascript" type="text/javascript">
& R" v4 a) y1 C5 m
var second = document.getElementByIdx_x('totalSecond').innerHTML;
1 K+ E! F8 t( q; k
if(isNaN(second)){
+ j+ r+ |; y8 l1 G0 k2 l# i( f
//……不是数字的处理方法 Z: H* W/ F( P1 x/ a1 k r
}else{
- _) w/ E# X- a' c8 k) A% p
setInterval(function(){6 z: E3 `/ n0 ~. M7 d$ |* \" _
document.getElementByIdx_x('totalSecond').innerHTML = --second;9 O/ ~5 h: h4 F
if (second <= 0) {
- T* N% c" z4 G; j+ H% ^. m
window.location = 'b.html'; l7 p' ~& k/ p
}
$ I' O$ I( B: c" w4 B, \9 w6 ~( }
}, 1000);/ h, M. C# t) L5 P7 L+ ?
}
+ v9 { q' u5 g9 T6 c' X
</script>

复制代码

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

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

浏览过的版块