cncml手绘网

标题: js定时器(执行一次、重复执行) [打印本页]
作者: admin    时间: 2018-7-31 10:57
标题: js定时器(执行一次、重复执行)
1，只执行一次的定时器
" m! `# f: I7 h, b
  1. <script>
    # W, r6 M7 R( x9 r& t
  2. //定时器 异步运行
    & J: r& D' k2 v" k; C4 o
  3. function hello(){
    2 ^  s. w, l6 Z1 B
  4. alert("hello");
    $ P, w2 Q9 `2 o) e
  5. } * N) q) u8 V. e4 b/ D1 h" b
  6. //使用方法名字执行方法
    3 D; Q! a: S$ Y7 c# m
  7. var t1 = window.setTimeout(hello,1000); ; ?6 {5 m% a$ [# N3 v8 G3 z/ B2 Y
  8. var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 % S% y: l9 r- _- F# {4 o
  9. window.clearTimeout(t1);//去掉定时器
    6 n0 C' F% d4 f9 d2 Z
  10. </script>
复制代码
2，重复执行的定时器
+ K8 E1 e# q) P  o6 a
  1. <script>
    % N+ m1 {6 w9 R! c& e) M2 R1 d
  2. function hello(){
    . v& o3 o: r! u
  3. alert("hello"); 1 ]. v$ d3 e# C- t8 T! R
  4. }
    - A4 D5 C+ x; b) M
  5. //重复执行某个方法 0 M( [0 `: ]3 g
  6. var t1 = window.setInterval(hello,1000);
    , Z" ^( O/ t- a1 g# L: a0 e
  7. var t2 = window.setInterval("hello()",3000);
      g+ {2 v7 U4 U$ C, _. _
  8. //去掉定时器的方法
    6 m0 ?6 v; Y  G7 q& [9 j) J- Z8 h5 q
  9. window.clearInterval(t1); 8 H  c/ N& I3 p
  10. </script>
复制代码
备注： 7 v" p0 {3 p$ K9 z) W0 b4 l
  p- n! ]$ u: ]- w- \% ^- \/ H- n
如果在一个页面中有两个方法，都是在页面加载完成之后执行的，实际却未能按先后顺序执行，可以参照如下方法解决：
4 l  }. X1 M: M' A" n可以在onload方法中添加一个定时器，设置一个定时器，“延迟”一段时间之后再运行，即可认为区分页面加载运行方法的先后顺序。
2 a9 T+ l0 J9 v  o9 w0 I- F  C! i: T- _% f) k9 X( M

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

1.倒计定时器：timename=setTimeout("function();",delaytime);2 v, U, V) ^! C! B, p8 b
2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成% l% F( l' q# G
“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。5 u$ n1 b% p7 {7 ?& Q+ v1 u
　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。
6 e* f8 q' H% u+ f/ a6 B比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，
' L: N( J/ f3 A. H4 L. B! s' t则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。+ ?( d9 o( `) ^7 E$ Z" O
比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。
$ l% \7 S* r% h) u% }1 EsetTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.' k! a& P" ?2 |
setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象
" k- n5 d: v% U# l+ m! |# r9 }clearInterval(对象) 清除已设置的setInterval对象

略举两例。
4 U; o" N9 h% \' ?2 s7 a例1.表单触发或加载时，逐字输出字符串


( `7 u" M4 N. T+ q- O
  1. <html>
      Z7 Z! L# V3 S+ W  G7 t
  2. <head>
    6 m7 C4 G, F, q  ]* L& I/ l
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />) }8 g% g. f9 s
  4. <title>无标题文档</title>
    + M1 q3 E% o& c( P7 o0 J
  5. <script language="JavaScript" type="text/javascript">" F; a, n* b4 ?, D, F  e) K
  6. var str = "这个是测试用的范例文字";$ q6 K( }4 A4 u
  7. var seq = 0;4 d# q5 W! `7 l
  8. var second=1000; //间隔时间1秒钟) ]& [9 M: w' _) g4 l6 I
  9. function scroll() {
    2 l( y- z3 C+ |+ p
  10. msg = str.substring(0, seq+1);
    ) I4 o. y; u) @' ^
  11. document.getElementByIdx_x_x('word').innerHTML = msg;
    4 Q# I. J8 J5 A) P' s9 @$ [
  12. seq++;; Q- X: @4 B. V7 k3 V. i/ O
  13. if (seq >= str.length) seq = 0;
    / _5 S5 R# w; g2 [4 T  H0 p
  14. }
    . N4 g5 ?+ ^8 a
  15. </script>
    ( I+ R# M6 F5 H0 U! l* }& p
  16. </head>  H5 [- y! W' [/ K+ ^
  17. <body onload="setInterval('scroll()',second)">
    3 ^9 j0 N: N3 e9 A1 ?+ P8 k/ l
  18. <div id="word"></div><br/><br/>
    ' [9 O6 T4 k+ r, n( i
  19. </body>1 F, F* @1 z4 p2 d( l9 p% C
  20. </html>
复制代码
例2.当焦点在输入框的时候，定时检查输入框信息，焦点不在时不执行检查动作。
( h) M/ h' n/ a$ c9 b2 c. W8 S3 f
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    6 u$ ?; y9 P6 g) O6 E
  2. <html xmlns="http://www.w3.org/1999/xhtml">
    ; n; B& t" E0 _& }4 h! V4 e) a% E: S5 f
  3. <head>  r9 ~2 y+ l8 ^( J; q
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    6 q" Q* L. C, e* Z
  5. <title>无标题文档</title>$ ~. X" `+ A$ H: J" I/ T
  6. <script language="JavaScript" type="text/javascript">6 `9 ]# s0 g: i7 x
  7. var second=5000; //间隔时间5秒钟7 m/ B5 @2 Y, a7 m
  8. var c=0;0 d. P( G8 X1 \
  9. function scroll() {, _# J: z/ X$ h+ n
  10. c++;8 N2 W  F$ m' O2 D, M0 S8 F
  11. if ("b" == document.activeElement.id) {
    . m3 s4 o, k2 X8 X2 P
  12. var str="定时检查第<b> "+c+" </b>次<br/>";% E) _! c* i- H4 N3 l" s" v4 Q1 W: {
  13. if(document.getElementByIdx_x_x('b').value!=""){
    - H5 N3 O7 l0 {$ ], P9 u
  14. str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";7 l4 f; Z0 }6 {- b4 x8 A9 X
  15. }
    5 q9 A" h: ~) A8 Y
  16. document.getElementByIdx_x_x('word').innerHTML = str;! h' V" s* r; d# Q+ ?
  17. }
    7 ~/ o# B$ N, j' @: ]
  18. }
    - B* G- Q* W' I
  19. </script>/ g9 V  x' T$ _0 C. p
  20. </head>
    5 i% x: V& j9 l3 }
  21. <body>3 F: F) Z6 Q3 d2 l
  22. <textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
    ; I* Z6 G1 k4 u. Z5 x, o
  23. <div id="word"></div><br/><br/>* v& a( m% f* [+ K1 d
  24. </body>
    3 Y5 X, a) ?2 A
  25. </html>
复制代码
例3.下面这个是最简单的例子，定时器时间到达后弹出警告窗口。
# @- y" H4 ]% l9 c7 [2 c6 ?- m. Y
  1. <html xmlns="http://www.w3.org/1999/xhtml">
    0 J6 p: H0 m. Q8 i: J$ l1 H2 Y7 E
  2. <head>) Z) e9 w0 ^5 i$ u1 \9 y8 o
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />, B+ a% t4 O  m5 F
  4. <script language="javascript">
    ; J3 Z% k2 M( c4 e" \
  5. function count() {
    0 G! P" W- P! a' L; [1 `) _
  6. document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";
    9 ]3 j, A4 S2 {+ W+ T
  7. setTimeout("alert('十秒钟到！')",10000), b9 `1 Y. e% J. z0 Q$ g1 V
  8. }
    % l, r7 m( g, Z( Y4 B0 ~
  9. </script>. X! a& k1 I8 Q
  10. <body>% V. w4 Q  e9 |$ ~0 l$ Y
  11. <div id="m"></div>
    & x0 s1 W3 l  W" t8 `$ T) B4 Y- x
  12. <input TYPE="button" value=" 计时开始" onclick="count()">0 N) E- l# K( H) X; D2 p6 g+ }
  13. </body>
    & A+ l! `2 w- g  x7 f
  14. </html>
复制代码
例4:倒计时定时跳转) U. Z1 g! ~& }7 @2 t
  1. <html>* R2 T2 Z9 O4 G7 N; H
  2. <head>
    : W/ S; j& V2 z7 J* ~
  3.   <base href="<%=basePath%>">
    * ?/ b% n  Y0 F" s
  4.   <title>My JSP 'ds04.jsp' starting page</title>8 Y0 R) w6 o+ T
  5.   <span id="tiao">3</span>
    9 [* q# u6 c( ^$ D
  6.   <a href="javascript:countDown"> </a>秒后自动跳转……+ W0 ?; A+ O$ X3 F- C' J& h
  7.   <meta http-equiv=refresh content=3;url= '/ds02.jsp'/>+ ]! F; J# Q7 p
  8.   <!--脚本开始-->
    8 F1 r, y9 @" b( E8 I
  9.   <script language="javascript" type="">
    9 U! I' e: J! m4 j
  10. function countDown(secs){# K, z: m2 i+ c7 B. ]3 ?8 k
  11. tiao.innerText=secs;
    6 _- X& ?. v! p' c; b/ s$ H
  12. if(--secs>0)& F; @8 _' V( U
  13.   setTimeout("countDown("+secs+")",1000);8 o1 c" v. G7 ^! y3 o$ \
  14. }
    ( F" \; m2 b4 C+ \
  15. countDown(3);
    3 L- H. [3 }' n  Y9 T; p
  16. </script>
    $ v5 \/ q& m4 |1 Q
  17.   <!--脚本结束-->3 I2 ~# o7 E* N' H8 @
  18. </head>
复制代码
例6:% b# [7 x9 x  _4 p9 g
  1. <head> 0 C) }6 d6 J0 g# Z
  2.     <meta http-equiv="refresh" content="2;url='b.html'">
    6 U) W8 w% c5 V2 a
  3. </head>
复制代码
例7:
7 K  G) J$ r" l# \4 u4 Q
  1. <script language="javascript" type="text/javascript">& \3 d! C- v: C2 K- s1 s
  2. setTimeout("window.location.href='b.html'", 2000);
    3 _- ?; z( Z0 D+ N
  3. //下面两个都可以用+ {- U3 Z8 x; Q+ S. K
  4. //setTimeout("javascript:location.href='b.html'", 2000);7 n* _; y& `, _" t
  5. //setTimeout("window.location='b.html'", 2000);' S6 _2 S2 G5 R& z
  6. </script>
复制代码
例8:
% F5 w# F4 X) k+ `# ^* E
  1. <span id="totalSecond">2</span>
    - S! n! u+ l: o9 \1 G
  2. <script language="javascript" type="text/javascript">
    # ?+ F# p. f; {$ e0 J0 i
  3. var second = document.getElementByIdx_x('totalSecond').innerHTML;
    & S0 u2 T4 A9 Q) B* p7 y/ b. X* L9 r
  4. if(isNaN(second)){# e  T* v2 f7 V2 v" h
  5.   //……不是数字的处理方法
    . H( ]6 i9 d3 w9 Q# Z9 f
  6. }else{
    ' x; [0 P! @: V; N) Y6 Q7 y
  7.   setInterval(function(){9 Q6 g+ y/ z4 K$ a; `; r
  8.    document.getElementByIdx_x('totalSecond').innerHTML = --second;& _4 o! Z+ a% H$ D  Q
  9.    if (second <= 0) {0 b: O- p( z' q. h& w
  10.     window.location = 'b.html';, `% ~) ?' X3 p( }! q5 w7 w5 }7 N
  11.    }  S1 A) n6 N% S+ R% r
  12.   }, 1000);& y- Y  D$ }9 G: u4 V2 [2 n2 _, n
  13. }
    + b- ?- \7 R5 v, r  _
  14. </script>
复制代码

9 b1 y7 [" i4 Y' e( M- C5 h
1 e" Z9 V% H2 D0 m5 L' |5 B5 z0 t" [  Q: v& ^! I




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