cncml手绘网

标题: js定时器(执行一次、重复执行) [打印本页]
作者: admin    时间: 2018-7-31 10:57
标题: js定时器(执行一次、重复执行)
1，只执行一次的定时器
+ D! Z8 a4 f8 A0 L# n0 T
  1. <script> 5 F! c  y; o8 b, e
  2. //定时器 异步运行 3 G6 a5 ]- j: v* B% ]! S/ B
  3. function hello(){
    , d' w9 `, c; d. u  A3 U# I3 z
  4. alert("hello"); 8 {$ V) p" k4 c6 N  |5 G
  5. }   Z! p2 s& r$ b' I0 H; b
  6. //使用方法名字执行方法
    6 |9 K5 [5 D" }; M8 p- e
  7. var t1 = window.setTimeout(hello,1000);
    , D" C+ o0 \7 S' y' t# S
  8. var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
    7 a# j3 W) D. Z# ~7 L/ @+ v* ~
  9. window.clearTimeout(t1);//去掉定时器 ; y, U. d; S) Y! j" V3 D
  10. </script>
复制代码
2，重复执行的定时器 : Z. [, W, r8 q& u
  1. <script> 4 @! @: u, q6 U8 n' S7 `
  2. function hello(){
    % x0 ^; B# h6 c) s" [, j
  3. alert("hello");
    # D3 o+ H/ G/ i" o4 O2 F3 @
  4. }
    # D1 k- e- ?8 Y% a" C
  5. //重复执行某个方法
    + I. V$ L& g4 y' W* d
  6. var t1 = window.setInterval(hello,1000); 0 G2 L2 P/ G! I3 t2 |4 W
  7. var t2 = window.setInterval("hello()",3000);
    % o0 R9 Q$ o$ t* I
  8. //去掉定时器的方法
    0 d$ H& M- q& Z' |( c4 H  `6 z. d: Y/ K
  9. window.clearInterval(t1);
    5 C) t. N& G7 \  x9 R8 a, s
  10. </script>
复制代码
备注：
1 f7 j( D1 W0 q) P; @7 ^' M& D- _6 G8 |3 ?9 T
如果在一个页面中有两个方法，都是在页面加载完成之后执行的，实际却未能按先后顺序执行，可以参照如下方法解决：
  }3 O& {3 x; f可以在onload方法中添加一个定时器，设置一个定时器，“延迟”一段时间之后再运行，即可认为区分页面加载运行方法的先后顺序。
+ g& u/ h7 l+ ^  g% O2 o' a+ ~4 x

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

1.倒计定时器：timename=setTimeout("function();",delaytime);6 b" t, {7 ^8 R+ x4 Y5 x$ j; B- I
2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成% o9 H7 P/ N( x5 A9 |
“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。
/ J3 E5 Z2 h0 t% g　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。
' n$ G% s  T. K比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，' P1 }1 B1 Q& v# }
则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。  y( j  v: ]+ B- J
比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。/ m. A* [7 |' Q& V7 K
setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.
6 G  E7 k5 G, K& u- X! RsetInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象# P$ R! h/ z1 ?
clearInterval(对象) 清除已设置的setInterval对象

略举两例。
! z0 d4 y; s8 L1 G例1.表单触发或加载时，逐字输出字符串

# M; [! r8 `' M& `2 L2 O; J
  1. <html>7 z; s/ t0 f$ p
  2. <head>( T( H7 g0 }7 N$ }, ^  K  {
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />2 `9 j  p) z& x9 k/ J$ i9 e
  4. <title>无标题文档</title>9 l, x; K0 \# ], y
  5. <script language="JavaScript" type="text/javascript">
    5 `- @# Q$ h2 c: o! y! J" r
  6. var str = "这个是测试用的范例文字";
    2 g/ U! W1 j$ X# T/ W; L
  7. var seq = 0;
    6 k4 C8 ~* w: w6 d% k; K
  8. var second=1000; //间隔时间1秒钟' f- {1 F- f% A9 L0 Y3 F6 ~, F
  9. function scroll() {
    * |, u( G7 o' |7 c# d9 b' [! O
  10. msg = str.substring(0, seq+1);
    + l/ O0 U6 ^+ a8 ]- |
  11. document.getElementByIdx_x_x('word').innerHTML = msg;* r& G1 y& Q4 D; F- \
  12. seq++;! y% j$ z4 ~: O# O0 Z4 F
  13. if (seq >= str.length) seq = 0;
    7 y/ s0 c' H  |0 `$ u
  14. }
    : R( Z/ g% l% Z# f, C8 ~
  15. </script>
    4 p% ]( ^' {% T
  16. </head>) p( x1 o3 `0 Q  ~/ `9 R
  17. <body onload="setInterval('scroll()',second)"># e: v0 B1 y; a
  18. <div id="word"></div><br/><br/>0 D! Y4 Q2 U' i& h4 n
  19. </body>
    ! o% g  j; u! z8 V# w  [
  20. </html>
复制代码
例2.当焦点在输入框的时候，定时检查输入框信息，焦点不在时不执行检查动作。1 a0 h- l7 q% {! j! n
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    5 }, \# ?$ V3 C4 E2 O; s; }
  2. <html xmlns="http://www.w3.org/1999/xhtml">
    3 J6 |8 ?0 h' ?/ c* J- `
  3. <head>
    * s- \$ F, ~1 g2 L$ N( ]+ i+ M& X" L/ d
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />/ O2 ]9 r, R4 Y- K8 {) P* i, G9 q
  5. <title>无标题文档</title>8 G; G) }7 I! r1 [& m+ V) @/ h
  6. <script language="JavaScript" type="text/javascript">
    0 ~, u( h$ M' f* U; h1 F: [( p5 ?
  7. var second=5000; //间隔时间5秒钟# O3 C+ q9 V( E9 d8 D
  8. var c=0;
    8 D. ]- C  d% h* Q+ z7 G
  9. function scroll() {
    " |0 o7 o3 u& }9 S; x2 b
  10. c++;9 m/ i  v2 m* S- d
  11. if ("b" == document.activeElement.id) {& T3 N: n. L5 u) B3 }# `5 N
  12. var str="定时检查第<b> "+c+" </b>次<br/>";& @' ]) ]7 i3 i! O  }1 [/ g) u- v
  13. if(document.getElementByIdx_x_x('b').value!=""){
    # h5 d" l# }& e6 q
  14. str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
    ) u, ~% Q2 e! k$ i
  15. }
    3 }5 p0 k6 i* {" h3 y8 g* d
  16. document.getElementByIdx_x_x('word').innerHTML = str;
    & i# s! J5 X! O  b8 Z3 W
  17. }
    ( \3 m! |' Z" l2 X, n
  18. }
    / s- [- K  P9 f/ `& a
  19. </script>
    0 k; M9 r! {' z+ c% T
  20. </head>
    ; M& z  D5 }1 ?" C7 _$ ]( T
  21. <body>3 A+ \+ r9 `1 R: ^" X
  22. <textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>. P( I/ O& Y+ g- g
  23. <div id="word"></div><br/><br/>
    ) }( L& t6 W- s3 j0 |; D
  24. </body>
    , j5 C8 c6 Z; R) i" _4 b, k
  25. </html>
复制代码
例3.下面这个是最简单的例子，定时器时间到达后弹出警告窗口。: P2 C: j" I# o
  1. <html xmlns="http://www.w3.org/1999/xhtml">4 ~& F0 q- q/ F  I7 y4 \! l* x- `
  2. <head>7 ~1 J4 _5 w6 O: N
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />/ ]6 ^' H1 ], W- u' w! _7 s: |
  4. <script language="javascript">2 d  b/ N* R) `" A* M! K6 S2 J
  5. function count() {& i) S. |7 L% s- w: @/ B2 V: ?
  6. document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";
    0 [7 s6 f1 \2 v& x9 X
  7. setTimeout("alert('十秒钟到！')",10000)) K* b4 [. }* E- R
  8. }5 P: m: `" I& p. D7 k
  9. </script>2 g$ {2 n! Z, }: }
  10. <body>! i5 G5 c2 f9 d. G7 A3 C
  11. <div id="m"></div>
    % _$ A6 Q0 P) U, f; Y
  12. <input TYPE="button" value=" 计时开始" onclick="count()">8 k8 }& O  T- N* I1 t
  13. </body>
    : \% |& M7 O$ ]% h# y3 ?" X- X
  14. </html>
复制代码
例4:倒计时定时跳转, L5 p! G0 d3 R3 v2 X6 [/ P; h# ^
  1. <html>
    / Q9 P( i- n0 N+ K- Z; w
  2. <head>' ]$ r2 p* N0 b1 T6 C
  3.   <base href="<%=basePath%>">
    - Q3 A$ m! r% M- d7 p, G; T, @
  4.   <title>My JSP 'ds04.jsp' starting page</title># h' D' t% d; U4 |+ @
  5.   <span id="tiao">3</span>
    ) d- j1 D- w- o: M$ w6 j, s2 A
  6.   <a href="javascript:countDown"> </a>秒后自动跳转……) p6 t! ~4 Z; ]# w
  7.   <meta http-equiv=refresh content=3;url= '/ds02.jsp'/>3 Z& E% q/ w9 H, c% y
  8.   <!--脚本开始-->  ]) j6 M: t" @& U2 {1 k
  9.   <script language="javascript" type="">" u$ B+ E! q2 F* V3 I- p
  10. function countDown(secs){9 S+ N1 v1 {0 B( l$ ]& y
  11. tiao.innerText=secs;) S) m2 S4 p3 d/ C3 V$ z
  12. if(--secs>0)/ |$ N- S2 Y9 n  ]  O
  13.   setTimeout("countDown("+secs+")",1000);
    . ]! n1 Y% {( {1 U, Y+ e
  14. }5 R" M) D% @  t% @% F3 s0 A
  15. countDown(3);
    2 ^3 F0 n3 O4 r9 Z4 m. J
  16. </script>
    ; W" q+ ~) [2 [1 ?" {8 J
  17.   <!--脚本结束-->$ E1 v  l5 h8 v' Q$ E% W7 i) q
  18. </head>
复制代码
例6:0 t0 [" }  c* h* m4 P1 e
  1. <head>
    4 V8 l# D7 O1 h: Z: O+ g. @6 w
  2.     <meta http-equiv="refresh" content="2;url='b.html'">
    2 X+ n6 k' v1 ^' m! U- A0 ^! _) c
  3. </head>
复制代码
例7:2 [& T3 C9 w, E% h
  1. <script language="javascript" type="text/javascript">
    ; E/ x- D& ?3 o: y
  2. setTimeout("window.location.href='b.html'", 2000);
    6 A5 d- U3 V2 @* L4 N8 k
  3. //下面两个都可以用2 Z) c, ?( ~0 y1 ~& P1 w$ J
  4. //setTimeout("javascript:location.href='b.html'", 2000);
    6 s. _, c# K4 m2 ?9 I* w
  5. //setTimeout("window.location='b.html'", 2000);
    % z1 ~) E! S* H
  6. </script>
复制代码
例8:7 L. C% d8 T: ?5 m! y* l! `
  1. <span id="totalSecond">2</span>
    . n, s6 T% R/ i, d
  2. <script language="javascript" type="text/javascript">
    * a3 i+ h: t. P# ^# J4 Z2 X' `, e3 C
  3. var second = document.getElementByIdx_x('totalSecond').innerHTML;$ D/ Y/ k1 t9 [- @- c
  4. if(isNaN(second)){
    % X4 I, a$ `; n: F. @$ p
  5.   //……不是数字的处理方法
    ) u0 w. z. k! v; j5 l
  6. }else{
    + e# m$ h: f- ~5 v: Z5 r
  7.   setInterval(function(){
    " s2 D1 e* E% V0 g; K6 w* u! @" q
  8.    document.getElementByIdx_x('totalSecond').innerHTML = --second;/ u7 p$ r$ g. M8 M. i4 p  r6 p
  9.    if (second <= 0) {0 I3 i: L' f5 H0 K# U6 e
  10.     window.location = 'b.html';
    - F0 {' f6 d5 F, d% y. j3 H9 F
  11.    }, D5 p& |  ]& s$ u
  12.   }, 1000);
    : x% D3 y$ z: k) E8 ]# Q$ ~, E
  13. } " m. Z; x7 R. ~, v4 y6 l* W
  14. </script>
复制代码
+ h/ d6 N! ^* c' O# w. k0 T

& x- }. ^$ s! ~% a: D, O) z' {. t! N! U/ ?3 s$ H. T0 j




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