cncml手绘网

标题: js定时器(执行一次、重复执行) [打印本页]
作者: admin    时间: 2018-7-31 10:57
标题: js定时器(执行一次、重复执行)
1，只执行一次的定时器 4 o9 [5 k2 X5 [. ?7 l' o1 K
  1. <script> - J' Y. D5 u; q3 z
  2. //定时器 异步运行   G( b% {  S9 s$ s" Q
  3. function hello(){
    # w: O8 v! A! I# v& t/ ~7 U, \
  4. alert("hello");
    . U  Z  s3 r6 T* J
  5. }
    ) G0 q3 z( F5 Z8 Y
  6. //使用方法名字执行方法 8 o  Q7 s$ N* t1 r
  7. var t1 = window.setTimeout(hello,1000); + O9 b  Y/ N* {5 ^  i3 J; o
  8. var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 : P+ c* A% k& K: I5 x* m; m
  9. window.clearTimeout(t1);//去掉定时器
    . r; n8 t4 `# D; U% J" S' _: B& f
  10. </script>
复制代码
2，重复执行的定时器 2 ]+ s# n$ L% X- J; _: j/ P, z
  1. <script>
    " ]6 W- i1 b! Q  J9 ~
  2. function hello(){ 4 M1 P8 }2 m+ e3 U! n
  3. alert("hello");
    8 ~* G8 e: b' q/ M
  4. }
    : i: \) ]- |) E; X0 Y$ u
  5. //重复执行某个方法
    - g0 ^. i: S0 E, B9 o& y! P
  6. var t1 = window.setInterval(hello,1000); 0 {) L+ X4 q( ?% w9 s
  7. var t2 = window.setInterval("hello()",3000);
    4 C6 e8 P* }- C% V1 w9 r* D
  8. //去掉定时器的方法 ( y! P$ k" k6 g* C1 ~
  9. window.clearInterval(t1);
    3 G7 m# }! u1 V1 @0 t
  10. </script>
复制代码
备注：
1 V& c7 Z3 v* I2 N* {! G1 e+ |) `/ Z
如果在一个页面中有两个方法，都是在页面加载完成之后执行的，实际却未能按先后顺序执行，可以参照如下方法解决：
, S# Y* `4 X2 S! {2 x8 t1 D# T. p可以在onload方法中添加一个定时器，设置一个定时器，“延迟”一段时间之后再运行，即可认为区分页面加载运行方法的先后顺序。1 S4 R  E8 `7 K. z. K
- x& L6 F9 [# ~; t* B' T

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

1.倒计定时器：timename=setTimeout("function();",delaytime);
& F; u( ^+ X! D: V; L2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成1 b" S2 S' T  Z. k, A
“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。6 H4 H; E) H# F3 c% D/ T' i9 g
　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。
, g4 D7 |+ O3 d4 }" Y% E3 I比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，
( F8 U. l5 E+ O: U/ z3 c则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。$ x5 ~' H0 {6 F& W
比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。6 a$ B' O) m+ f5 R
setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.
' d& d% T+ E) O1 |+ zsetInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象* H& v# }: a$ V7 L2 p& x" f' R& j
clearInterval(对象) 清除已设置的setInterval对象

略举两例。* z- W7 w0 c6 L# u
例1.表单触发或加载时，逐字输出字符串

+ }% r9 ?, S5 f
  1. <html>8 l. Y" I1 H3 I. c8 Y8 Z
  2. <head>
    9 `- r/ e5 m) p8 S0 F# g+ W) R; j
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />- n1 u. a" `! E8 @% p: j/ g2 z
  4. <title>无标题文档</title>% T( n1 L8 t5 j2 |
  5. <script language="JavaScript" type="text/javascript">! W3 F$ F8 a5 U) q8 M
  6. var str = "这个是测试用的范例文字";0 [3 G$ y& s- M' i
  7. var seq = 0;) D. Q- y5 {& Y% G( N
  8. var second=1000; //间隔时间1秒钟! K. V0 }* e& W3 A* g
  9. function scroll() {' d0 \) ~" x; g1 N" P% ~0 n8 Z
  10. msg = str.substring(0, seq+1);
    2 J& c. L2 U- [
  11. document.getElementByIdx_x_x('word').innerHTML = msg;
    8 u7 w! l7 ?9 t3 a
  12. seq++;8 c, t; `+ U- D2 V8 ]( l
  13. if (seq >= str.length) seq = 0;
    : n, z# R6 m8 D- M) |9 l; M
  14. }- R6 x9 O+ [2 O
  15. </script>% y- S9 I. ~( {7 q9 X- Q- m) o  X
  16. </head>
    6 q' k. S- @/ |  F
  17. <body onload="setInterval('scroll()',second)">; [5 [7 j' U6 k& \" f4 u8 L
  18. <div id="word"></div><br/><br/>
    / D  E4 u, O9 ^
  19. </body>
    - I- f9 T: k$ I6 A' s
  20. </html>
复制代码
例2.当焦点在输入框的时候，定时检查输入框信息，焦点不在时不执行检查动作。+ e, a. G2 _  C. B
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">7 [5 ^2 t$ A  n2 }+ C9 Q. l4 S
  2. <html xmlns="http://www.w3.org/1999/xhtml">
    ! [5 A8 P# D; A$ w
  3. <head>0 h# O3 m7 n" }& x+ _+ `
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    & K2 w. O% \7 T3 X
  5. <title>无标题文档</title>
    0 \1 y0 N; q2 Y
  6. <script language="JavaScript" type="text/javascript">
    9 o& |1 R# Q3 I0 {
  7. var second=5000; //间隔时间5秒钟
    5 }0 \3 ]" X: ]8 c7 ?+ t; X
  8. var c=0;
    6 y+ q4 ~1 g4 {% F9 P
  9. function scroll() {% T. b2 |/ q" `
  10. c++;
    7 V$ x. K# k7 |5 A% b5 w) y6 f, B# R* l
  11. if ("b" == document.activeElement.id) {
    : I' j$ y( d! B
  12. var str="定时检查第<b> "+c+" </b>次<br/>";3 s9 E% a, @9 e) s( y- _
  13. if(document.getElementByIdx_x_x('b').value!=""){
    ( ?/ R# b% `  x- j8 B
  14. str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";) L3 m& Y0 b. y6 n& b- y
  15. }! M- {; f" w+ c1 E) x
  16. document.getElementByIdx_x_x('word').innerHTML = str;
    : q6 |. m( s: }
  17. }- t2 Q0 G( v3 t, i- d: s0 }4 c
  18. }
    , i8 G2 R" I7 O1 m6 r4 d
  19. </script>
    5 u0 A0 @. b, z4 Q. m' N: U
  20. </head>7 |) W' G% `$ x' h1 S5 I: B
  21. <body>, R& b2 ^, d6 Y- {; c8 e/ p& B
  22. <textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
    - P% G6 ?7 ?# ~
  23. <div id="word"></div><br/><br/>/ e8 p1 T  b+ y
  24. </body># O9 N( z" e0 S5 g$ h
  25. </html>
复制代码
例3.下面这个是最简单的例子，定时器时间到达后弹出警告窗口。
0 N/ t/ c/ Q2 O1 m/ M* e* M
  1. <html xmlns="http://www.w3.org/1999/xhtml">" |4 k# v3 Z' i% X, C/ u: t
  2. <head>- u1 j( I5 w0 s2 C1 R0 ~) U8 P
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />, Q- V6 [, ?, \9 Z; M
  4. <script language="javascript">
    6 p' Y1 G% x+ |. P' i9 K6 J7 @
  5. function count() {1 s5 e! v7 [5 ?# r9 c3 s2 `9 q0 q
  6. document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";* G( v3 A3 ]+ K3 \
  7. setTimeout("alert('十秒钟到！')",10000)
    1 Y& m! C  J7 @: T4 L; s) m
  8. }
    4 y1 t, W# ^+ C" e1 _
  9. </script>
    # O8 h" e# a7 q) S
  10. <body>
      s9 m, R$ _/ H, |) \$ W. c  k
  11. <div id="m"></div>
    0 S4 o/ q7 P7 t/ c
  12. <input TYPE="button" value=" 计时开始" onclick="count()">
    + O5 o4 J# O' t. w$ Z
  13. </body>0 N8 s, w6 }  U0 V
  14. </html>
复制代码
例4:倒计时定时跳转6 `: [* Z0 b1 R6 K" l
  1. <html>1 F0 s3 P- _' ^3 k: h4 ]! {7 o) C' Y1 k
  2. <head>
    1 k8 |: h/ Z' @2 i
  3.   <base href="<%=basePath%>">& M  t1 M1 I1 O2 N1 Q
  4.   <title>My JSP 'ds04.jsp' starting page</title>3 o8 A0 p3 ~  k1 j# }
  5.   <span id="tiao">3</span>3 b! n0 }0 `# p
  6.   <a href="javascript:countDown"> </a>秒后自动跳转……
    ) Z6 n7 Y+ a' W% V) ]
  7.   <meta http-equiv=refresh content=3;url= '/ds02.jsp'/>* e) Y- {. ?! j& ~2 F
  8.   <!--脚本开始-->5 Q) Y6 w3 N! @6 J# ?
  9.   <script language="javascript" type="">) j. ^; H* A  ]* G& W) [
  10. function countDown(secs){
    ! q  C- h# Q  e  x$ D& Y/ N
  11. tiao.innerText=secs;
    * F( A* {; [; ]
  12. if(--secs>0)" v1 F- e- _7 [  _8 W, q& b% c
  13.   setTimeout("countDown("+secs+")",1000);7 ~" A5 U( f4 ^
  14. }
    ; F/ {/ f6 M  g+ ]" S8 ^. h
  15. countDown(3);
    - N% @; L, p4 y' ~7 t8 p/ t& R/ \1 A8 B% n
  16. </script>
    ) e4 R3 B& ^# a3 b7 t
  17.   <!--脚本结束-->
    , q! U1 l7 o# v
  18. </head>
复制代码
例6:
/ s7 E* p  A- ^/ Z1 S
  1. <head> / L# B! j# E+ @% d# N
  2.     <meta http-equiv="refresh" content="2;url='b.html'">
    + W9 i: O$ P/ D: g6 w: Y. u
  3. </head>
复制代码
例7:3 a# i- C' M" U- @- m3 o+ k
  1. <script language="javascript" type="text/javascript">
    ( q' I' `( z% ^
  2. setTimeout("window.location.href='b.html'", 2000);
    & w. U' t2 H6 z8 @
  3. //下面两个都可以用
    ( C/ k5 j' r' U" k% g. Y8 k
  4. //setTimeout("javascript:location.href='b.html'", 2000);
    + _+ L2 X% d9 R9 S4 G* }' F$ R6 P. {4 x
  5. //setTimeout("window.location='b.html'", 2000);
    9 A" h" b. ]1 c' ]/ f! B
  6. </script>
复制代码
例8:
' o, [2 l4 p. y' N, u1 ?. |* X  W
  1. <span id="totalSecond">2</span>0 I6 ]9 _2 T, X
  2. <script language="javascript" type="text/javascript">4 f0 _) A/ U3 E: ~9 J
  3. var second = document.getElementByIdx_x('totalSecond').innerHTML;
    ' P; N( U* Z4 u2 l3 ?
  4. if(isNaN(second)){! [8 w2 z: M5 q8 ]
  5.   //……不是数字的处理方法) o8 s% L7 F4 g4 O+ d
  6. }else{
    ( L& v; }: A% r5 d$ q& k& q( }
  7.   setInterval(function(){
    ( n6 m3 P( ^4 N; B) a9 G
  8.    document.getElementByIdx_x('totalSecond').innerHTML = --second;0 l: l" Y' k6 q9 _
  9.    if (second <= 0) {
    ) n( s5 f2 h9 U6 W: s8 G$ d. D( M
  10.     window.location = 'b.html';$ @2 U! }4 H5 t! Z# ?8 u0 L
  11.    }4 l( z9 m9 \  J
  12.   }, 1000);5 T  C7 k% H+ V3 n- S
  13. } + ?" G% L: _" \" _# s
  14. </script>
复制代码
4 s9 O% j1 f5 A1 u0 e4 Q: }$ C

' a. U, y5 z, o9 W/ S2 K/ T
; l; X. g! |( h  b6 f) ?



欢迎光临 cncml手绘网 (http://bbs.cncml.com/) Powered by Discuz! X3.2