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

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

1，只执行一次的定时器

<script> ! D8 x3 J0 @! t6 k6 X) n4 M; w! f
//定时器异步运行
' T/ U0 q% Z& R: E4 M+ H H4 Z7 H
function hello(){ 8 U5 l' k# `: W4 q
alert("hello");
- s5 i! e3 e8 C; ]% w
} 8 n/ _0 u( g" \9 A
//使用方法名字执行方法 ' U1 I* k- h( T* v" z# \+ v
var t1 = window.setTimeout(hello,1000); + f7 j; D9 u) ^! t
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
3 t4 K" x7 }# c) @3 E5 J; Q
window.clearTimeout(t1);//去掉定时器 + }' z- _" V& n& W n
</script>

复制代码

2，重复执行的定时器

<script>
5 o, x( Q) x$ h: M0 g; |
function hello(){
0 Q8 {3 z5 }5 e4 ]+ V6 e- Q+ _ @$ n
alert("hello"); : @: c$ o9 Y2 \ U9 p, g
} ! S1 k2 o' H9 P
//重复执行某个方法
! A/ d* J$ W6 ^/ V1 |' m
var t1 = window.setInterval(hello,1000); 9 g/ \7 u, a# W4 `( W' p' h; O
var t2 = window.setInterval("hello()",3000); 7 F/ _1 f4 f' x; a9 F+ @
//去掉定时器的方法
7 Y. P% ]& N+ n! {9 k, C( a
window.clearInterval(t1); # M1 @ l' W( A: u \ q
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);6 M+ T2 j$ j g {9 h
2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成& u* p! v0 z+ e
“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。8 V2 c* [! r0 x E$ d1 ~; O
　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。
& C: e$ ~- j6 d( R( f比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，9 H: ^/ r5 w: E9 t9 T- I7 v, r
则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。) U' P9 W( _' J$ l$ H3 }: F3 S
比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。: i2 j: e1 y F
setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.
! Q6 n3 C; V* g2 X& qsetInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象, {6 ~4 O2 C& N' R* g
clearInterval(对象) 清除已设置的setInterval对象

略举两例。' T& L6 R, j% L6 M5 d" d; F
例1.表单触发或加载时，逐字输出字符串

<html>
/ |9 N. k8 R' h# r6 r9 b5 R8 t- Q
<head>7 T) C4 `: A2 @; e; _& b' x4 w
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />. g( S: V$ F, i
<title>无标题文档</title>
/ I3 _' q) @! x0 w! Q
<script language="JavaScript" type="text/javascript">/ g9 ~* d+ a( _- E( Z. K
var str = "这个是测试用的范例文字";, I* ^5 M0 |6 m2 U/ i5 ?
var seq = 0;& A; [" R6 K* `5 v2 b0 X
var second=1000; //间隔时间1秒钟9 ^! {) G S- d" [
function scroll() {7 f! T% u6 L% S3 R0 K5 W" L/ p8 }0 F
msg = str.substring(0, seq+1);
- ^ P$ [! M2 n
document.getElementByIdx_x_x('word').innerHTML = msg;
; H- B( M# e4 z f' F8 V
seq++;
) G% ]) p, }6 ^$ ?
if (seq >= str.length) seq = 0;! V+ j0 y8 ?1 A
}0 u9 U" E c7 M% C( _1 {: T% C
</script>) g Q9 \4 o' |# w: e5 d
</head>1 I0 z3 [2 J" G! x; S
<body onload="setInterval('scroll()',second)">/ J2 U1 J8 q% I2 |! R6 ?
<div id="word"></div><br/><br/>0 y1 v5 n% q7 H' B
</body>, h8 `% W6 D$ v% O9 v
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> n4 Y7 u& ?; R9 J2 K
<html xmlns="http://www.w3.org/1999/xhtml">
9 T; G8 A- B+ l$ p$ ^
<head>' }7 J; d& `, I+ z( Q+ `
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
+ A8 Q( J7 {1 i6 e& K }
<title>无标题文档</title>6 s; B5 ^$ `4 q- n1 S8 {
<script language="JavaScript" type="text/javascript">6 y8 p3 c2 K1 {6 d8 K% z6 c7 W
var second=5000; //间隔时间5秒钟
6 k3 m" L" r8 X) m9 W
var c=0;9 v$ R3 T# a2 x3 R- W
function scroll() {2 P6 ]! i A; ?: M3 n) ?' B
c++;
$ h2 W8 I( s/ @$ B, m
if ("b" == document.activeElement.id) {
& \8 Y- m- L+ T. L: x
var str="定时检查第<b> "+c+" </b>次<br/>";
1 u( U7 {& t# j: u( u' n
if(document.getElementByIdx_x_x('b').value!=""){! V3 B( j/ T, r9 ` _3 F- |% q
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";2 i, m/ D2 R g+ |% G
}
9 t5 [9 H8 G: U7 j7 C+ H
document.getElementByIdx_x_x('word').innerHTML = str;
- u# C, ?% G. I; M! J. ]
}- _" M% O$ m6 b. N- K( C
}
% L4 P( G$ n7 z b
</script>
. l: b' M+ n! ~! e G) W$ f
</head>& |0 L6 J. X0 r/ C, a* l, \
<body>
/ s6 Y# w4 V' S: }
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>% Y" Y! J, z- f) ^; X( y
<div id="word"></div><br/><br/>
# u- Q! g3 m" _6 z% {
</body>! K. A2 l% Y! Z7 p1 b- `% _
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">
9 Z8 q. B4 B. x- a# G
<head>) I9 `1 u. T& i4 i& F. o$ o
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
9 A. O- f- ^' z1 N$ a
<script language="javascript">5 g N6 V; k, c. g# v T
function count() {4 f |; F2 N/ v, M5 _5 j
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";* I6 j; i6 b# {+ E1 t1 z
setTimeout("alert('十秒钟到！')",10000)
- V' b2 j( g a# R* {4 Z7 A2 v
}6 U \' q v$ {9 {/ S- r
</script>* O% G/ ~/ f2 K/ O
<body>
_- C3 J* x t% f& g+ x
<div id="m"></div>) @& G2 O& t7 S2 e' ?$ P! |
<input TYPE="button" value=" 计时开始" onclick="count()">
# V4 L2 n$ b) V8 ~! ^2 ~( u$ k
</body>/ W" P/ r; R6 D9 A; k) G5 i
</html>

复制代码

例4:倒计时定时跳转

<html>
; N' T# c8 G, a E( r9 \
<head>
8 P- {) C8 ?% V
<base href="<%=basePath%>"> X3 C3 V2 D" J3 _' S n1 `
<title>My JSP 'ds04.jsp' starting page</title>7 h1 Z. V, _7 x9 A
<span id="tiao">3</span>4 j/ e* e$ ^. `( I
<a href="javascript:countDown"> </a>秒后自动跳转……
% C1 W/ j4 w- |) N5 O
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>6 s' B3 Z" c& y( Z
; F9 t( {0 Q3 \5 A! u9 i5 o2 ?0 e
<script language="javascript" type="">
5 R; e8 u" z* p0 V7 k! @* A) }0 [
function countDown(secs){
- h; j6 N# i/ p4 p7 M6 |
tiao.innerText=secs;
. S$ k6 D y$ @5 k" A
if(--secs>0)1 o1 U8 G5 @- A# P: B
setTimeout("countDown("+secs+")",1000);+ g+ l. ], | I: [5 u2 f0 u0 \% [
}
n# @! @4 R7 b
countDown(3);# c7 N: {2 K& Q: E1 w; Z/ \9 ]0 u% h
</script>
6 d5 X) m {& F5 R
9 ~+ @% B7 s3 m( W2 N
</head>

复制代码

例6:

<head>
, s" V( D- ^$ |# O% |+ B
<meta http-equiv="refresh" content="2;url='b.html'"> 5 ?8 K6 g- \. u$ q
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">/ u F) V. b) t( a: M7 n
setTimeout("window.location.href='b.html'", 2000);$ _% v* g. I4 `0 O
//下面两个都可以用
9 \- O9 a( o$ E) P( v
//setTimeout("javascript:location.href='b.html'", 2000);
" s' ^8 [6 T2 N2 Q# B
//setTimeout("window.location='b.html'", 2000);
0 e0 G2 R0 D+ w$ c/ t' H% P; _
</script>

复制代码

例8:

<span id="totalSecond">2</span>4 n8 _& p$ C ^
<script language="javascript" type="text/javascript">
" U$ E. Z: _- x& v
var second = document.getElementByIdx_x('totalSecond').innerHTML;" J4 ~( n1 X! @! j# w3 E p/ m
if(isNaN(second)){
2 J0 n3 n k! I3 |
//……不是数字的处理方法# m, \' S3 q* O
}else{
+ J" r% s" G& W6 q
setInterval(function(){
6 X A* `7 ~1 ?9 @2 ]* b
document.getElementByIdx_x('totalSecond').innerHTML = --second;
7 I" Q9 ]: d# b( H3 J( s6 U" j
if (second <= 0) {
3 B' g: \: F; v$ a7 v5 Y
window.location = 'b.html'; `, ?4 a* `; N4 V* b u4 |$ E
}2 w9 b" Z4 i$ i7 p$ t
}, 1000);
1 N$ q. @3 {6 S& P' k0 ]; {* J% R
}
% v9 B8 y4 q) d- w: t" Q. K
</script>

复制代码

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

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