cncml手绘网

标题: js定时器(执行一次、重复执行) [打印本页]
作者: admin    时间: 2018-7-31 10:57
标题: js定时器(执行一次、重复执行)
1，只执行一次的定时器
! f* L& L3 {* ^$ q2 Z/ a) O9 I: c
  1. <script>
    2 K7 {7 }& v5 o7 |) P2 @
  2. //定时器 异步运行 6 b) o( h& O# p3 Z
  3. function hello(){ / w9 c, K; ?( Q9 ^+ b( s6 \
  4. alert("hello");
    ! i' x1 G* G8 n4 E
  5. } + a, F# j  B- }8 V2 a- S
  6. //使用方法名字执行方法
    $ e% X- x5 q7 L2 C: ~
  7. var t1 = window.setTimeout(hello,1000); ' ~( L1 W* ^4 i  g
  8. var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
    & ]/ b+ R, y; C" S
  9. window.clearTimeout(t1);//去掉定时器
    6 h7 G" I9 A; S4 Q. \7 j
  10. </script>
复制代码
2，重复执行的定时器 4 V6 `$ E1 D' M; K3 u8 O% b. I
  1. <script>
    $ m2 m! E. k- T: }. t) o
  2. function hello(){ 8 w. ?; h% B, p! _+ _7 N  E3 T
  3. alert("hello");
    % L6 h: L1 f" j$ r: |& N6 M7 x0 m
  4. } ; u9 Q7 P, Z6 u2 _7 S
  5. //重复执行某个方法 " p' x# {2 X* n  m+ z5 p
  6. var t1 = window.setInterval(hello,1000); ! ]3 j7 d6 d( S3 T7 W! d! m- F
  7. var t2 = window.setInterval("hello()",3000); ' ]5 T6 m8 `: z2 h
  8. //去掉定时器的方法 1 l% |; S' X* L
  9. window.clearInterval(t1); 2 L% R& T9 Q/ X5 }% Z& E
  10. </script>
复制代码
备注： ' n9 @$ \, w9 r" Q( o+ a( [- d
/ I' R( a4 d( ~* H/ ?
如果在一个页面中有两个方法，都是在页面加载完成之后执行的，实际却未能按先后顺序执行，可以参照如下方法解决： 3 Z* m6 o1 P4 |% ]; F0 g
可以在onload方法中添加一个定时器，设置一个定时器，“延迟”一段时间之后再运行，即可认为区分页面加载运行方法的先后顺序。- a, b/ `& I: e6 ]
: y/ t, z0 k- X( e

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

1.倒计定时器：timename=setTimeout("function();",delaytime);
0 a8 H8 m. o9 y* {( X% F2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成- g( [0 @1 H6 u! N% h
“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。
2 y) m. W2 C. N) `　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。
9 T5 x0 h8 u) p- K  ^$ J; O+ t比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，0 t3 l: L) T, ~9 z
则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。
* T. H1 x3 U$ a* v) @; a- |1 ~$ B+ f比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。
, W! u6 G5 s: ?2 k+ csetTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式., K  A+ G+ K- r1 [* ^, ?% G
setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象# A$ D# ]2 V5 n. |2 n8 k, G
clearInterval(对象) 清除已设置的setInterval对象

略举两例。
. a+ ^8 v5 a+ @& G( ^例1.表单触发或加载时，逐字输出字符串

% U! _, c5 c4 Y& e. @8 ]
  1. <html>" k) X6 j2 g: `) r- I( w
  2. <head>( P2 L5 L2 S3 M  e" s% T9 w
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    8 w9 `9 ]% Q7 ~+ b7 q  G
  4. <title>无标题文档</title>/ d) I4 S& F* z
  5. <script language="JavaScript" type="text/javascript">$ _' `! ~5 o& }7 H" y5 H' X& d' s
  6. var str = "这个是测试用的范例文字";
    0 O) P% y# b  R" D% l) K: @
  7. var seq = 0;0 C/ \0 o* O0 A( Q) C  S
  8. var second=1000; //间隔时间1秒钟
    . v+ ~8 ^# E1 f/ N4 w1 M6 b
  9. function scroll() {0 K0 o+ B& q0 a6 }/ L/ G# a
  10. msg = str.substring(0, seq+1);
    9 u8 ?; U  x2 r) `
  11. document.getElementByIdx_x_x('word').innerHTML = msg;& n6 q; Y! I& P/ F( q
  12. seq++;  K! G0 U, ]+ y! y3 V, k1 C
  13. if (seq >= str.length) seq = 0;9 ^4 }8 X( [7 F2 M+ `, C! v
  14. }: H: t( P3 k% X
  15. </script>
    1 b0 G+ I7 X8 G( _6 `$ ~: M4 G' I
  16. </head>$ U6 K% J  Q& j0 S% p, l
  17. <body onload="setInterval('scroll()',second)">
    & m- c( R0 c1 P& J/ e: g& d* u
  18. <div id="word"></div><br/><br/>8 M, u" _/ v3 D( _
  19. </body>
    , x& Z1 [: k. o& p5 X
  20. </html>
复制代码
例2.当焦点在输入框的时候，定时检查输入框信息，焦点不在时不执行检查动作。
. e* S! Q: T" u5 q7 G
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">6 b7 m0 ]5 i# h6 z0 w
  2. <html xmlns="http://www.w3.org/1999/xhtml">
    7 N4 `5 V- I$ g" D  I3 O& B
  3. <head>8 |3 @  v( C' T* `
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    8 T/ ]. X' R/ U
  5. <title>无标题文档</title># R" o$ e$ `# Q( s! d/ A8 w
  6. <script language="JavaScript" type="text/javascript">
    2 \5 K: f- Q. S& t9 R& I
  7. var second=5000; //间隔时间5秒钟0 J% M9 `# h, u0 J4 f
  8. var c=0;9 Y: v; v8 U$ _  v. u6 r
  9. function scroll() {0 f1 u4 K2 i0 x- d2 E* j
  10. c++;
    / G4 W+ Y4 k8 H7 @1 |+ {% P' k
  11. if ("b" == document.activeElement.id) {
    8 ]( G9 u, S# ~6 ~0 @( b
  12. var str="定时检查第<b> "+c+" </b>次<br/>";8 }. `. R4 T% \  J( x
  13. if(document.getElementByIdx_x_x('b').value!=""){
    * {% M% D2 c) \, x$ S% ^! _2 P
  14. str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";& j# h! b8 n) w; [9 z* N; ~7 T$ l% N
  15. }
    . ~# q9 I7 m6 k) \2 \3 L4 K
  16. document.getElementByIdx_x_x('word').innerHTML = str;7 V4 |' R7 [( x7 C& H
  17. }
    2 u( n: S8 [5 d8 }5 d
  18. }: T/ _% ?6 B% S3 H* u/ Y4 }2 X
  19. </script>
    # S3 U  U5 ~. k
  20. </head>0 G: W- T3 N" f; L' D# {
  21. <body>& {- Z" _8 ~5 E% \8 N
  22. <textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
    2 K: H2 P; c9 ?9 C( V- i; \
  23. <div id="word"></div><br/><br/>/ A4 [! P$ b3 {+ n, Z7 W4 ~7 y
  24. </body>1 Z. D. g8 j- e/ b8 e; X' ]
  25. </html>
复制代码
例3.下面这个是最简单的例子，定时器时间到达后弹出警告窗口。
& A, W$ Q# P5 E3 O6 O
  1. <html xmlns="http://www.w3.org/1999/xhtml">/ k! H; Z( t: W. c+ d
  2. <head>: y& F) R) Y  B. o7 @$ |$ F* ~
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />7 Z, s0 {$ x0 C/ z; _$ M
  4. <script language="javascript">
    5 w8 R  X3 ?+ g5 a
  5. function count() {6 L* L3 z- L" n" `5 r
  6. document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";' R+ g+ N7 [& s# h& r$ ?
  7. setTimeout("alert('十秒钟到！')",10000)8 e2 H# T$ ]; g0 _8 ]
  8. }
    ; x# j1 }' }, X8 w; A( ?% v" A+ a" U9 A
  9. </script>/ S& U. l7 B+ M! b" \+ U. `
  10. <body>, G4 |* w6 q+ j# F
  11. <div id="m"></div>1 }& ]0 J5 o; q
  12. <input TYPE="button" value=" 计时开始" onclick="count()">9 d5 W* D1 c$ {: B* R# \8 w
  13. </body>& ^; R, c2 i# \+ k; ?
  14. </html>
复制代码
例4:倒计时定时跳转( o0 F7 E+ @+ l
  1. <html>
    8 a: u) d! t8 F; ^  }3 x
  2. <head>
    : \/ Z+ }3 G* h  }8 N& c
  3.   <base href="<%=basePath%>">/ t+ Y2 G2 X: o% G3 z+ ?7 z& e# T# j
  4.   <title>My JSP 'ds04.jsp' starting page</title>
    ! w" x% Q6 P" y0 {+ V1 `6 D# ^
  5.   <span id="tiao">3</span>
    & d0 j! z3 M; I' [9 Z$ H% P
  6.   <a href="javascript:countDown"> </a>秒后自动跳转……( B( J9 h& {' h5 ^, Q! p
  7.   <meta http-equiv=refresh content=3;url= '/ds02.jsp'/>
      n& f& y# |3 ]( P
  8.   <!--脚本开始-->1 Z' t5 S$ |+ t% G
  9.   <script language="javascript" type="">
    $ s) e) S- ~- x: m( g  w' b
  10. function countDown(secs){1 A6 d$ `) j' e% T! E1 W
  11. tiao.innerText=secs;0 t/ P- |5 Y$ e* f
  12. if(--secs>0)
    % Q; n* m% F% d6 `) P
  13.   setTimeout("countDown("+secs+")",1000);
    ; @# W" f9 V9 W2 F
  14. }
    # A! Y, o: ^4 @- K( \) v
  15. countDown(3);/ G  F& q: \7 J1 U
  16. </script>& d3 u) @. l; y7 P3 l
  17.   <!--脚本结束-->
    : O0 }, x; _% O9 e" S- A2 E0 s3 P
  18. </head>
复制代码
例6:
/ M  w, b% m4 t8 I" b
  1. <head> * L! Z# B1 }" G1 W4 h6 y4 t
  2.     <meta http-equiv="refresh" content="2;url='b.html'"> 0 _  [2 ^' H, z( C$ A
  3. </head>
复制代码
例7:" D( v- h  M% ~( |
  1. <script language="javascript" type="text/javascript">0 V' O1 P! c  O# a0 p3 `' K
  2. setTimeout("window.location.href='b.html'", 2000);
    8 _: k; U* i' K1 \0 A. K' `
  3. //下面两个都可以用
    + x6 X# }; w& ?
  4. //setTimeout("javascript:location.href='b.html'", 2000);, \% o+ @" X7 w4 e3 U, Q$ ?
  5. //setTimeout("window.location='b.html'", 2000);  K7 E  d. c4 H8 t- i! g# F
  6. </script>
复制代码
例8:# F( ?( w( g9 p# Z' |, b+ A( T7 S, d, j
  1. <span id="totalSecond">2</span>
    4 j. U( ], z5 Z' l, K# n5 s
  2. <script language="javascript" type="text/javascript">' L7 h& Q9 [/ G9 A" W
  3. var second = document.getElementByIdx_x('totalSecond').innerHTML;
    # B1 h! z$ w+ Q
  4. if(isNaN(second)){8 B- X% W# p" ^7 d0 T7 ?+ s
  5.   //……不是数字的处理方法
    3 A& E5 V( p0 l; t9 g3 \
  6. }else{
    9 [, i0 Q# r* l: J, p! ]/ _
  7.   setInterval(function(){, d+ W5 N% U7 ?; ]: y( _( X
  8.    document.getElementByIdx_x('totalSecond').innerHTML = --second;; H6 S2 y0 Q5 t, [7 U# a
  9.    if (second <= 0) {
    . U8 V0 C! }, Y- W
  10.     window.location = 'b.html';: I9 Q+ B- f3 C) H% V
  11.    }$ s) t& j8 W9 a6 G3 `$ Y/ k# Y
  12.   }, 1000);
    1 c; z  U+ n) ^! l# e2 n' f$ k
  13. }
    ( a% A! c/ [8 A; }
  14. </script>
复制代码

6 r( T* w- c: Y0 T, S! }
$ S! g, q  S, j2 o" F
6 ]2 V, a, i3 J% c; |) z1 E



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