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

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

1，只执行一次的定时器

<script> ! n. a2 Y8 R" ?7 Z
//定时器异步运行
$ ~" k, j6 i4 _4 G0 ?
function hello(){ - d* H8 U7 z) U6 t
alert("hello");
. w& d# `- j4 |6 M
}
& o# d+ p! O7 M: `/ y
//使用方法名字执行方法
& ?: h; ?/ \; c
var t1 = window.setTimeout(hello,1000); 6 P1 S6 J* x) u. V' U
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 * q) e3 f4 L. E$ Y, G
window.clearTimeout(t1);//去掉定时器
# H: U/ x: ?8 G C! J) l
</script>

复制代码

2，重复执行的定时器

<script> # c9 |( n0 {5 S E; v1 O
function hello(){ 8 o' K. X! @# N5 h
alert("hello");
+ K2 b- E# K3 `9 ]
}
( `9 o: W1 n1 m J0 L8 |4 Q7 X
//重复执行某个方法
0 }4 `: Z" u" q5 a& X9 l
var t1 = window.setInterval(hello,1000); 6 ]- o5 U: W3 U/ Z/ @2 f4 H
var t2 = window.setInterval("hello()",3000); & h) ^5 r; Y" ~+ K7 ?: l( p
//去掉定时器的方法
! v! m0 i/ ^4 ^6 M5 r
window.clearInterval(t1);
* L! L) n( t: N. c+ Z* x5 Z
</script>

复制代码

备注：

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

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

1.倒计定时器：timename=setTimeout("function();",delaytime);
2 v8 V$ t( s7 r. q# `2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成( `6 o! m  `  S; f
“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。
, C, W9 n. c. o5 K8 x% v  D# E　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。8 e: G! b* R  k  N5 M( R
比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，
4 U4 Z$ o# x6 {" T5 f  h% C" P8 h则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。/ ^7 f$ g* Y+ ~8 ?& t8 O, j( |
比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。
0 Y$ O) a5 X/ G; b# e# P' Z' V4 qsetTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.0 s4 i) J" {+ Q2 p. W/ r+ X5 ~. Q
setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象
" |+ t: T2 X% {( _; {! hclearInterval(对象) 清除已设置的setInterval对象

略举两例。
/ i5 L7 c( Q5 {1 Y例1.表单触发或加载时，逐字输出字符串

<html>+ }# D5 S/ v; |& L" ~8 c) @
<head>
, U9 W+ j. [( k+ n5 n
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
1 ]5 m$ f6 m) e
<title>无标题文档</title>
5 c e( e0 F' S b7 a+ s x
<script language="JavaScript" type="text/javascript">% H* w, v$ b. g
var str = "这个是测试用的范例文字";
; D) V r2 J6 Y4 a# j
var seq = 0;
: J7 H; n) k" A5 i* s% q
var second=1000; //间隔时间1秒钟
* U. L) X4 @- I/ j0 R. p) b& p
function scroll() {/ X7 B5 L& m+ |& T* O1 ~+ q
msg = str.substring(0, seq+1);
1 q2 q3 Z7 {2 L$ W, D
document.getElementByIdx_x_x('word').innerHTML = msg;, E) O' E0 Y6 x5 L* `
seq++;
) B% T8 o6 v6 }! }2 |
if (seq >= str.length) seq = 0;$ u" w0 f: x& m; r2 @
}
* O. \! I$ g" ~/ ~) N
</script>- k6 ^! O `6 \' _
</head>
7 t8 l- x# R; ]( L1 h
<body onload="setInterval('scroll()',second)">
) Q$ Z p2 |3 o! d1 Y- j7 f* S
<div id="word"></div><br/><br/>+ j2 U/ J5 [) E* ]1 a1 d
</body>
. K7 ]8 S6 g! W+ \
</html>

复制代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
, y k* i% D5 @$ s
<html xmlns="http://www.w3.org/1999/xhtml">
. E; ^% g$ p% y: U6 R- h
<head>8 V. E m, E* r
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />5 v, z$ _9 g3 D; J
<title>无标题文档</title>
& N" C' ?" W" t% D
<script language="JavaScript" type="text/javascript">
5 ?+ [6 h8 D7 R0 p Y( @' ~3 B
var second=5000; //间隔时间5秒钟
/ x7 f$ [$ t, N' z. \# _
var c=0;; c- A4 T2 r+ D0 @, O6 O
function scroll() {7 v3 S6 p- L9 q& [
c++;5 ?$ q" J1 J9 S" n/ X
if ("b" == document.activeElement.id) {
' c7 f, ~' W7 M3 M( d9 i. D
var str="定时检查第<b> "+c+" </b>次<br/>";
/ ^. u! E9 r9 I4 n4 ]
if(document.getElementByIdx_x_x('b').value!=""){
. `* U) J7 u) ~% p
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";2 c$ y& n7 u }+ M: q' x/ a0 ~
}6 z2 E0 G) C3 o0 W3 o
document.getElementByIdx_x_x('word').innerHTML = str;! Y* g7 \- B/ x+ |; Y% S" ^
}. l/ ?- C2 j$ n7 b' @
}
, u; U" R; b/ e- c1 |
</script>
4 T5 w- `) F% B
</head>
, ~" ~! o$ c& ^+ S# v }2 i! z
<body>- s f+ w0 p3 B" I
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
A, j; J# |# Q+ l
<div id="word"></div><br/><br/>
7 o+ f7 D' \9 I* N
</body>" S5 j# L9 M% ?4 j
</html>

复制代码

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

<html xmlns="http://www.w3.org/1999/xhtml">% F- O4 @0 a0 H6 S
<head> ~9 k) b' \) U6 Y& b
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />$ z, @/ g3 W3 g+ g
<script language="javascript">2 F- R, ]/ D# H. Z
function count() {4 ~+ u, J# r ~; w& Y/ G% M9 h3 S
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";
' E" D* f1 j5 a- n$ ]
setTimeout("alert('十秒钟到！')",10000), y* w4 z+ g& {4 b J& n6 o
}
" H: @2 w7 ^, t3 w _$ i
</script>
& n" k! y9 A8 e$ t9 n
<body>
: g! O) G3 \- r# u- j
<div id="m"></div>
( i( g3 S, Z8 y1 X
<input TYPE="button" value=" 计时开始" onclick="count()">
8 l- e0 p& ] j
</body>
* d5 h! t' W& V1 I( v7 N
</html>

复制代码

例4:倒计时定时跳转

<html>
+ h9 w1 F1 A! B0 K+ x
<head>
4 k2 q& r' f2 e: @7 f: }$ S
<base href="<%=basePath%>">- f3 Y* r9 t$ T$ d0 T1 m
<title>My JSP 'ds04.jsp' starting page</title>+ T1 g/ c* h4 @+ d: M% R( z
<span id="tiao">3</span>
" f! Y4 W$ e1 g7 D1 @
<a href="javascript:countDown"> </a>秒后自动跳转……8 s" o T, L" k' e* r3 o
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>: f7 w6 J4 P$ l! t5 T& N
' c' T7 _, s i& E$ _" y9 r
<script language="javascript" type="">- F7 o# q5 K: O" B6 ]. [
function countDown(secs){
6 O" s7 |4 h- d) x Q; j. h% U
tiao.innerText=secs;7 @4 q9 n3 ^, x6 o8 i( ^
if(--secs>0)( L6 e Y, E# y; @4 H: z0 o
setTimeout("countDown("+secs+")",1000);
1 j$ P: r5 R4 E# l
}
3 J- \6 j |9 ~6 {- b9 W
countDown(3);
9 J8 }! a5 C/ S) V
</script>2 o6 z- \2 }- @( S
+ _$ ?, R F. E. O5 C) _4 f# L
</head>

复制代码

例6:

<head>
* {: N7 R0 z. t1 P' A! A1 }
<meta http-equiv="refresh" content="2;url='b.html'">
9 d' B7 e) A6 a' x, s
</head>

复制代码

例7:

<script language="javascript" type="text/javascript">
. g' g) `2 z6 n
setTimeout("window.location.href='b.html'", 2000);
, t. Q5 d9 x m9 s; _9 g; o# \# R
//下面两个都可以用
5 C0 Q7 h; z' Z. v
//setTimeout("javascript:location.href='b.html'", 2000);
//setTimeout("window.location='b.html'", 2000);
, Z' V6 F$ s& w K6 j: Z
</script>

复制代码

例8:

<span id="totalSecond">2</span>1 }5 \1 {( U) ~% j" T9 }
<script language="javascript" type="text/javascript">6 T, @9 i( r3 y( g% |- V
var second = document.getElementByIdx_x('totalSecond').innerHTML;
, I' b4 a, K1 h" e3 K" T7 w
if(isNaN(second)){, \6 b7 H8 c3 R6 n# r$ C! X. K
//……不是数字的处理方法
9 i/ [% I/ p k
}else{6 p$ A8 }9 B/ N8 M
setInterval(function(){
: \- h3 p5 L8 b" P5 M
document.getElementByIdx_x('totalSecond').innerHTML = --second;
2 T) q6 T. n. N4 x" X0 U
if (second <= 0) {
$ e% }! N* p, S0 ?- A; k% o
window.location = 'b.html';
& G' q, D$ g s* e& u
}6 ~$ O& c0 A, ~" w2 b2 B; _
}, 1000);0 r6 R8 K( Q3 P
}
% z# _; i* A6 F! M" T6 \
</script>

复制代码

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

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