cncml手绘网

标题: js定时器(执行一次、重复执行) [打印本页]
作者: admin    时间: 2018-7-31 10:57
标题: js定时器(执行一次、重复执行)
1，只执行一次的定时器 & G0 r3 I. R; t& v6 n( |  t  ^/ C
  1. <script>
    / _: v8 t8 B/ b. u' x0 ^4 Y9 W
  2. //定时器 异步运行
    & L& G2 l% C% G& G
  3. function hello(){
    / z  C. i& I4 S
  4. alert("hello"); , x/ G! l  E9 n' s2 p  \
  5. }
    4 v6 A4 D3 G1 Z; Z) \
  6. //使用方法名字执行方法
    5 @: J( d$ J! j
  7. var t1 = window.setTimeout(hello,1000);
    " Z# Y3 S/ `5 p  C& q2 F
  8. var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 1 d- \- l4 D8 A" |$ F# ?
  9. window.clearTimeout(t1);//去掉定时器
    + T& L' A0 u! e* Z6 t' G! w# K, w
  10. </script>
复制代码
2，重复执行的定时器
. Y3 t( D1 M- f5 Y
  1. <script> $ Q2 E9 E) w$ ?+ p
  2. function hello(){ . L$ _  e( Z/ u7 m$ Z/ _/ a1 f3 S
  3. alert("hello"); 9 |2 ]( u4 b( y, z% t0 H
  4. }
    + c! P# |2 Q8 l- T
  5. //重复执行某个方法 1 h  s, g- q: ^) n
  6. var t1 = window.setInterval(hello,1000); , u" ^- r) R: C0 Q* C( B7 v
  7. var t2 = window.setInterval("hello()",3000);
    $ I  g/ u0 e' @$ c' x
  8. //去掉定时器的方法
    : _. Q: i! N$ W9 w  C
  9. window.clearInterval(t1); 8 Y! I0 m; W# {: L# q* @, g
  10. </script>
复制代码
备注： 7 v! P+ o4 U3 E5 L; ]- @$ a0 h

% {; ^7 y+ z7 H4 k- A6 s. ^如果在一个页面中有两个方法，都是在页面加载完成之后执行的，实际却未能按先后顺序执行，可以参照如下方法解决： $ S! u- Y. g; E4 q' G6 s" ^
可以在onload方法中添加一个定时器，设置一个定时器，“延迟”一段时间之后再运行，即可认为区分页面加载运行方法的先后顺序。# J8 Z7 m. ^6 c% U: ]9 R1 k/ u

1 w* ?2 m: Z" Z2 X1 U) g

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

1.倒计定时器：timename=setTimeout("function();",delaytime);
/ V0 t9 D0 W* Y# ?5 Q2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成5 w+ @7 f* T9 ^: X
“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。1 B) P% T% i! X) G/ u- v( |
　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。
# ^+ P" K$ n$ f2 X比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，# ]: }8 \) I' a% P1 W- e5 L1 P0 |
则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。' ]- u' R1 I: d& m: F  }
比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。
2 z: M) I  O4 h8 }setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.
2 `2 b* s: A3 E" |6 T9 r. ^/ T) UsetInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象
/ }4 q. K4 N1 wclearInterval(对象) 清除已设置的setInterval对象

略举两例。
7 R/ }% A1 L1 d# L# r, D例1.表单触发或加载时，逐字输出字符串

- m. U0 I  [8 b4 ~2 V
  1. <html>
    / y0 ^8 l7 m6 g0 h! C& G
  2. <head>/ R+ y- A% |5 b! v5 A# y
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />% ^1 _  `: u: n2 x/ w" j$ Q
  4. <title>无标题文档</title>
    3 q1 I; N! M+ v5 j, E8 y1 S; `
  5. <script language="JavaScript" type="text/javascript">
    ' U4 e) a; E* P
  6. var str = "这个是测试用的范例文字";
    ) @# w2 S8 m7 u' q- q$ v
  7. var seq = 0;
    3 `% K$ Z# J6 _- p7 ?- m
  8. var second=1000; //间隔时间1秒钟
    ( [2 a9 Z6 |; S* Z
  9. function scroll() {( a! k5 V( J- M* z% H
  10. msg = str.substring(0, seq+1);
    & D" k  V# B* C& f* f. H0 ~* ?# \
  11. document.getElementByIdx_x_x('word').innerHTML = msg;
    & Q# W' a3 v: o
  12. seq++;
    9 w. C% c7 C. k+ `0 m6 I( o
  13. if (seq >= str.length) seq = 0;
    & [: {% ]' J+ U, p8 h
  14. }
    # b3 x4 B7 O6 f" l' c
  15. </script>
    " X1 _: @8 j" W1 ~( m6 d1 }
  16. </head>
    " i. ^$ ?( D# o# m
  17. <body onload="setInterval('scroll()',second)">
    + q6 N2 o1 B3 p/ [# |$ m
  18. <div id="word"></div><br/><br/>
    9 {- g  a! }- z8 }- z! ~1 |
  19. </body>
    : v6 z0 p3 t3 N9 M$ X- V/ y
  20. </html>
复制代码
例2.当焦点在输入框的时候，定时检查输入框信息，焦点不在时不执行检查动作。% S! D& N* k. i" \7 e) \
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    ( [- b# v2 M! c2 ^$ b: F
  2. <html xmlns="http://www.w3.org/1999/xhtml">; `6 @% M1 z, }  T! D+ A# i# ?# @
  3. <head>; b8 _1 U' l- a" o$ l1 y+ T
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    $ ]8 l! \) h( r9 I
  5. <title>无标题文档</title>
    , h0 s! ?9 i; l
  6. <script language="JavaScript" type="text/javascript">% @/ _3 I3 M: Z: O. {- {% m
  7. var second=5000; //间隔时间5秒钟
    : X( m8 l$ B- }) q: [" Z* L
  8. var c=0;2 W+ L3 j! M; A( ]1 v) n" e
  9. function scroll() {: e4 Y8 R9 E: D. p/ M# n
  10. c++;2 W+ U9 }3 Y1 X' j8 Z7 \
  11. if ("b" == document.activeElement.id) {9 O+ c( g+ j5 d8 F; ]8 Q+ T
  12. var str="定时检查第<b> "+c+" </b>次<br/>";
    ( \6 T8 i$ M+ s8 G: q
  13. if(document.getElementByIdx_x_x('b').value!=""){7 F! S$ H/ U% C# ^+ [7 z
  14. str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
    % ~" M& @: U* D( A$ i
  15. }
    3 N& H5 m. \& l) R8 q
  16. document.getElementByIdx_x_x('word').innerHTML = str;6 z, X6 A$ b7 H0 K. M- f- D' n5 {
  17. }/ v# u; J8 A) h; {1 U9 S* C
  18. }
    $ \# {! y3 k5 R/ Q" N( C
  19. </script>2 D4 G- R9 S4 \4 O% S: x0 A
  20. </head>
    ) U  M+ m& W9 U: O
  21. <body>
    $ E  x8 G2 m( j8 ?8 k- O) T
  22. <textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
    . W3 G, ~; P6 t  l/ K( N- z& d% e. U# o
  23. <div id="word"></div><br/><br/>! t! m1 h& D8 {
  24. </body>4 F3 ]# `' Q. j4 M2 s! |
  25. </html>
复制代码
例3.下面这个是最简单的例子，定时器时间到达后弹出警告窗口。
: N* U- G3 K# `9 J) j5 V
  1. <html xmlns="http://www.w3.org/1999/xhtml">+ i1 @& K% c0 y
  2. <head>. ?  q! N7 r, B
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    ( E% |. q& D2 R4 u, d8 Z3 c1 V
  4. <script language="javascript">
    : q8 r. ]! q  o! s0 `! K4 T
  5. function count() {
    , e4 _% J, Y2 ^# T, N
  6. document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";" i# O0 e4 \/ u& x1 ?5 ~" q/ v
  7. setTimeout("alert('十秒钟到！')",10000)5 A4 H8 e9 T  W  v0 _/ W+ H
  8. }
    9 H/ N0 m7 z2 P2 k. `1 |
  9. </script>! |3 o* T! j$ o- s4 Z4 I3 G# R
  10. <body>
    3 O) m, K& x( M
  11. <div id="m"></div>; `% m. ~# X; Q" U7 D, C7 j( p% u
  12. <input TYPE="button" value=" 计时开始" onclick="count()">4 O! S0 ?. q8 n. X2 k
  13. </body>
    : d' K1 n) D3 E! t1 |
  14. </html>
复制代码
例4:倒计时定时跳转2 c( n* c/ e: f3 L# U
  1. <html>
    + n# g6 Z. T+ C. X+ u: E
  2. <head>, \0 j- D. V- N5 C" _
  3.   <base href="<%=basePath%>">- p5 V/ `' s  O! P$ }
  4.   <title>My JSP 'ds04.jsp' starting page</title>5 m2 y2 U  T' |1 ?7 h
  5.   <span id="tiao">3</span>% y2 G4 [$ Q( [+ o0 }8 S/ T# D7 ]
  6.   <a href="javascript:countDown"> </a>秒后自动跳转……
    ) n& M7 l/ v6 \" A
  7.   <meta http-equiv=refresh content=3;url= '/ds02.jsp'/>! y- m4 m( h) O" E0 z0 h/ p$ V, o% _
  8.   <!--脚本开始-->! `- b& b# r* Z4 z3 p
  9.   <script language="javascript" type="">, B" d9 q* h/ e) ?# k8 W
  10. function countDown(secs){! B7 w5 g$ ?) |
  11. tiao.innerText=secs;
    ; ]' m) u: _! E. y
  12. if(--secs>0): L3 z* f! A# F/ G" E6 D) K4 n3 U
  13.   setTimeout("countDown("+secs+")",1000);
    1 W) C! S; ~9 q" ?* N
  14. }
    1 \* Z1 x0 V& k1 I; H
  15. countDown(3);
    8 d) v  v* A7 I( U  }
  16. </script>4 C+ i. k% [/ P9 J" c2 \
  17.   <!--脚本结束-->
    - ]  w. @' S& w$ C. Q
  18. </head>
复制代码
例6:. C8 R0 u' W1 _+ B! W! I" {
  1. <head> * W% E/ B+ `! B5 f) e* W  e
  2.     <meta http-equiv="refresh" content="2;url='b.html'">
    ) q- m3 y9 z% R) [. r
  3. </head>
复制代码
例7:
2 t9 r% r1 ?' B  ], h
  1. <script language="javascript" type="text/javascript">
    , a( w; R! \. \: j. A
  2. setTimeout("window.location.href='b.html'", 2000);& _, e( z; }4 ~- G9 V4 g
  3. //下面两个都可以用
    2 d$ `7 x) p5 @
  4. //setTimeout("javascript:location.href='b.html'", 2000);
    3 |6 t7 |$ d$ ]& C
  5. //setTimeout("window.location='b.html'", 2000);
    4 T3 [' U6 J" @, b2 W2 s" Y5 i2 u" u
  6. </script>
复制代码
例8:
# v1 m1 e! O3 P( J3 o
  1. <span id="totalSecond">2</span>" i. F* D2 Z0 f- U% a; E$ v# B0 Z
  2. <script language="javascript" type="text/javascript">
    # _3 R% j! {1 u* Y$ _+ r; p& q1 V/ q3 x
  3. var second = document.getElementByIdx_x('totalSecond').innerHTML;$ C* r  h5 @+ H# s& G
  4. if(isNaN(second)){
    1 P5 P0 D+ ^9 k" @# U- C
  5.   //……不是数字的处理方法) `8 {- @/ v+ j$ e$ W5 y6 M
  6. }else{
    5 i# ~5 B# x0 g- t( v& P6 r9 A$ y
  7.   setInterval(function(){4 [. v" B! e; m: t1 a! r
  8.    document.getElementByIdx_x('totalSecond').innerHTML = --second;
    ; D$ ?% E) I* m! Z' s8 _
  9.    if (second <= 0) {1 j# V' p0 B: H/ e7 t# c- Y
  10.     window.location = 'b.html';/ y) @5 N4 b! L
  11.    }
    " P9 g/ p6 [' @
  12.   }, 1000);
    + {3 C5 p* I4 i3 T( _" ]* R; p
  13. } # I5 z0 ^- e, w8 l7 R
  14. </script>
复制代码
; l4 ?4 n$ S* W% O' o+ |

: b/ Q  m. ^! r. o+ Y4 d! z2 j" x$ h/ L1 y# T. p! X! c2 H  T4 F! o




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