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

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

1，只执行一次的定时器

<script>
8 B' b, j0 U: ]0 J$ L) r+ G. O- \
//定时器异步运行 7 K* w( U/ G2 m: O* P7 c
function hello(){ 8 q' X8 @0 _# j; C5 c! I8 W7 N
alert("hello");
7 u2 P( o, H5 y
}
9 h' L+ s7 O: @( M. i' u4 v4 g0 ^
//使用方法名字执行方法 ! J( T3 x0 W% q: F# z9 y
var t1 = window.setTimeout(hello,1000);
9 X3 t2 S% e' M7 ]- V4 ]
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
8 D" c3 k6 \) l: x
window.clearTimeout(t1);//去掉定时器 : V9 r: g# x" }" Z: _ q
</script>

复制代码

2，重复执行的定时器

<script>
+ T1 y) W$ _4 }8 D, c/ c5 N
function hello(){
4 m2 U. {- L( f% y) b0 Q! K2 b1 [
alert("hello"); + u5 d0 M5 X/ D: m0 i6 P; t: P4 e
}
& t; S, B. H/ C) v) ^' ]
//重复执行某个方法 ( n e" f; N0 Y; V# n& Q) v
var t1 = window.setInterval(hello,1000);
" }6 P1 g1 `) ?2 W
var t2 = window.setInterval("hello()",3000);
) X3 [! W) \0 J( f: b
//去掉定时器的方法 7 |, x, n2 v8 \
window.clearInterval(t1);
e( `. z2 d9 x3 R/ R
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);- t/ k ~3 ?- o8 ~& v
2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成) z" n" W8 ]0 |1 t* X- @
“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。
; u; ^2 G7 L$ j% l4 A7 o% T　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。8 A9 O7 @1 W- h' `, Q
比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，- I6 }4 i, N+ T% y' G
则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。
Q4 |* z7 m% A$ r! X" N5 Z比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。) D( s0 l; m( h2 E" m. g
setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.
+ @& X% X; J5 d, U3 w7 DsetInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象! D, C- `' @/ S1 e0 v
clearInterval(对象) 清除已设置的setInterval对象

略举两例。
5 p/ A; Y6 e8 s3 J例1.表单触发或加载时，逐字输出字符串

<html>2 M8 f% J6 K" a( m3 r0 g/ s
<head># \' k7 ~8 q) W8 x
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />5 r- p) f, z0 Z, u
<title>无标题文档</title>6 s4 ?2 Z1 ?; S' Q- o' F: S
<script language="JavaScript" type="text/javascript">
, D! j O/ T; ^: }+ u5 p
var str = "这个是测试用的范例文字";2 |& }5 k3 P0 T) f
var seq = 0;
; a3 Z C0 [4 ~3 _$ h2 n
var second=1000; //间隔时间1秒钟" Y9 ^3 w) y, k& N4 f
function scroll() {
9 a& f: b. q8 ~' ^# a1 N. r
msg = str.substring(0, seq+1);
G+ g' ^( l8 W7 r+ o6 h+ Y
document.getElementByIdx_x_x('word').innerHTML = msg;, c0 I% H6 n0 a1 y5 l
seq++;
/ b3 `: D: f. W: V! V( g
if (seq >= str.length) seq = 0;4 Q1 S( ^9 Q4 W1 Z
}
( B& A9 s7 N3 b% Q
</script>+ _8 T9 ]% s" Q6 Z( i
</head>
. v M! C: G) o: t6 {6 H6 ?
<body onload="setInterval('scroll()',second)">
% {) v4 e: h" ]. d1 g+ e# H
<div id="word"></div><br/><br/>' Q( J+ _$ k7 `% h9 x2 C }+ `9 w
</body>
0 K/ [* C! i* W7 v' U1 ~4 D" G z
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+ [. L. X" C, a! I) F' y
<html xmlns="http://www.w3.org/1999/xhtml">
, H1 k6 u+ o4 A, r8 I, W. j$ O
<head>- f: [' C, n* b/ C% x6 o; x
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
: X1 ]" _6 o' C/ F2 c% D
<title>无标题文档</title>; G. e! I/ y% Q! p5 x; g& x
<script language="JavaScript" type="text/javascript">8 ?9 ~- S& E" C8 e+ Z4 x
var second=5000; //间隔时间5秒钟
* r7 s' F7 H% L
var c=0;
" _- Y6 H, Y) C) _
function scroll() {
N6 x+ n, n0 j6 b
c++;
! F0 _' N6 M8 K. a) @) Q
if ("b" == document.activeElement.id) {6 _, C: V% @+ O9 W \' H, B% [
var str="定时检查第<b> "+c+" </b>次<br/>";
3 G" p5 h- g& j9 ^9 y# d9 @
if(document.getElementByIdx_x_x('b').value!=""){7 h7 R' e4 E' U: P8 l+ t
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";8 s }, g' L- r2 q7 `) @6 o* ^0 R. x
}# L) ^+ X. O) w% ?7 ~
document.getElementByIdx_x_x('word').innerHTML = str;
; j' R, Q- b4 M8 H
}, Z- ~- G4 V" W( ]7 _
}
$ [- u4 k* _! y2 g
</script>
* X3 c4 c! x8 K0 ^; c
</head>; O. W- T3 Z% l9 m
<body>
. G8 c; H/ J. u, i8 p" r8 H) M& L! N
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
- }% r8 p3 x9 B: h
<div id="word"></div><br/><br/>
3 Q* g/ s* m9 a4 T: ?
</body>
" C& ^! F' G/ y% ^
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">
- A1 O' \( g2 k1 @/ f7 a) q
<head>
, Q- X- R \' ^. ~3 X, c6 t
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /># P, F+ e: r% p1 I
<script language="javascript">
; Y" ?! q! _5 D2 D% F- S% Z
function count() {
0 _; w# {; m4 W" o
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";
* ?2 Q% [& a E7 j$ v
setTimeout("alert('十秒钟到！')",10000)* q" r( n, u# _
}+ ^1 {6 [- O/ g# v4 h' C
</script>* U* l/ c$ }6 g$ _
<body>& X- I% q* v0 P+ w% C; G7 w
<div id="m"></div>3 z) m$ r6 z& {& f/ H4 x
<input TYPE="button" value=" 计时开始" onclick="count()">/ X8 A }) k& d. }4 `9 \
</body>
" ]# ]& Q7 K% S3 W, }+ d) T/ @
</html>

复制代码

例4:倒计时定时跳转

<html>7 C0 U, F8 ?& X F9 Z$ w* j
<head>
1 O& |* G( y& }2 L. H
<base href="<%=basePath%>">
1 E/ U" p$ ?. |: h+ s7 c
<title>My JSP 'ds04.jsp' starting page</title>0 Y# `. [7 s8 d. i% \+ G
<span id="tiao">3</span>0 \9 Z# t! K# u2 } p' o
<a href="javascript:countDown"> </a>秒后自动跳转……
6 g7 t: \/ b" D) t, _- }
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>( |. h: V/ W! {+ [9 G
& ?. P. [( {- L" l- ^
<script language="javascript" type="">
! t, y& D0 A& R! c X% `* h
function countDown(secs){
* C7 c5 \; l/ K9 X! {( P L
tiao.innerText=secs;
' Z) }2 B( r8 W% j/ N! \
if(--secs>0)- l' h% q' c7 {7 o
setTimeout("countDown("+secs+")",1000);
0 [# J7 V$ B" M5 B
}) W/ F! R! v& Q. V0 \
countDown(3);
O- Q4 |# r5 ?) g
</script>' a) t- y! \1 c/ A
) o+ y/ ], g: H# s" e
</head>

复制代码

例6:

<head> . R' L4 J; s! f: H( @( U6 @% r
<meta http-equiv="refresh" content="2;url='b.html'"> ! V8 u# c: H5 D1 t, D# b
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">( s8 j) q! V6 C& F+ p
setTimeout("window.location.href='b.html'", 2000);
[- e: B) O( b+ V
//下面两个都可以用& v6 d# P8 W$ h# W( y6 u5 y+ g* M
//setTimeout("javascript:location.href='b.html'", 2000);
9 g3 ?! m0 h& _" v
//setTimeout("window.location='b.html'", 2000);
- n" `: W) i. }* p. I
</script>

复制代码

例8:

<span id="totalSecond">2</span>
' I O& P$ N0 a1 T- N& @
<script language="javascript" type="text/javascript">
9 \* i3 F8 X; p( t& ~& t
var second = document.getElementByIdx_x('totalSecond').innerHTML;
* C3 w1 z6 ] B" K7 w9 y; y
if(isNaN(second)){
' {/ [' a1 `: s* o: i
//……不是数字的处理方法7 ?" Z. ^$ j1 `0 F: M% M! P; X
}else{
: b- \. _ M5 c) w+ i' J! N. n
setInterval(function(){# w% ~5 _( r, Q7 T2 x7 e
document.getElementByIdx_x('totalSecond').innerHTML = --second;- t1 H( m& A- w2 a, a
if (second <= 0) {) T7 u& N8 n4 F7 k" _5 A- g
window.location = 'b.html';# A9 B0 \. |( ?7 [
}( s' B! c; f0 O+ Y6 a5 F3 S% r
}, 1000);0 ~6 |$ g ~6 K {7 R. I( Q' B
} ! J5 S! O I, o; [! s
</script>

复制代码

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

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

浏览过的版块