cncml手绘网

标题: js定时器(执行一次、重复执行) [打印本页]
作者: admin    时间: 2018-7-31 10:57
标题: js定时器(执行一次、重复执行)
1，只执行一次的定时器
  |5 R) E! V7 ~3 ]- U8 k* [
  1. <script> 4 N5 g( T4 k4 r) t4 \, ^. l( o
  2. //定时器 异步运行 4 d2 s  `1 o7 W3 [1 N; V; s: V1 F
  3. function hello(){ . D" {3 X' N  s7 w0 [' q
  4. alert("hello"); * N% y& {3 M' U0 N0 d3 g( u* I( e
  5. }
    , S* c- s7 O& |
  6. //使用方法名字执行方法
    % E, k: M* E2 @
  7. var t1 = window.setTimeout(hello,1000); 3 H2 m- C! m; r9 h/ U/ U
  8. var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
    : H6 s( g1 y+ J* f2 ?
  9. window.clearTimeout(t1);//去掉定时器
    " ?9 M$ Y3 H% A! K* x; o
  10. </script>
复制代码
2，重复执行的定时器 7 D; E# {5 v- B0 u2 Y1 P
  1. <script>
      n& T0 E3 J, F. `# ~* S
  2. function hello(){
    % e/ h3 t) X: ]8 ^
  3. alert("hello"); ' o( M; g' s% w4 U6 w/ _8 D7 M- c9 S
  4. }
    ! r3 S. q) C8 h6 m2 a+ s; q
  5. //重复执行某个方法 / ^' x) e% c: f5 J  ]( y
  6. var t1 = window.setInterval(hello,1000);
    & P. G0 F. {) I+ M
  7. var t2 = window.setInterval("hello()",3000); ; W2 E# j. L, `$ h& E7 Q9 o8 q) L
  8. //去掉定时器的方法
    ' K) z, H8 p, a1 \0 P' c
  9. window.clearInterval(t1);
    6 w5 z7 `  |+ j" B; R2 w9 S  \! p
  10. </script>
复制代码
备注： ' c% O9 y: q; Y- C8 ?
2 c& w% G1 u0 W, K) n% X- Q  i
如果在一个页面中有两个方法，都是在页面加载完成之后执行的，实际却未能按先后顺序执行，可以参照如下方法解决： 9 y$ r$ O* i  o1 j# r) o
可以在onload方法中添加一个定时器，设置一个定时器，“延迟”一段时间之后再运行，即可认为区分页面加载运行方法的先后顺序。
4 M0 F$ ^. H- C. B& o) d" z1 B4 K- ]" i/ f6 w

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

1.倒计定时器：timename=setTimeout("function();",delaytime);
# c) [. g  @: T6 }2 \4 _9 t2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成1 k: b: V/ `6 B1 |; o) I  e# D4 V2 w
“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。( G) e3 z$ G0 K, ]) j- I1 A( B1 o
　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。
; q+ |; S5 e8 a4 W8 L比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，
. x2 ]  J9 x6 w) \则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。, N" n/ j; e. {2 c3 p' H# @+ B+ E
比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。/ f1 h. X7 S, y1 L% W
setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.
8 ]0 Y7 e/ p# v9 W+ usetInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象. O5 w* k) g% [$ j3 k' m' s* V
clearInterval(对象) 清除已设置的setInterval对象

略举两例。
' `; S( q0 G- s9 N- f; y例1.表单触发或加载时，逐字输出字符串

6 l7 }8 W# ]. G5 [! |( w; e
  1. <html>" s% u8 t7 w' x+ V$ O
  2. <head>/ N2 Z5 \' h5 S% w0 {
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    " e- p1 z1 _" b( n; ]
  4. <title>无标题文档</title>
    - j/ E7 z& e3 t4 M8 \+ Z) @0 o: u6 {
  5. <script language="JavaScript" type="text/javascript">
    $ ?% N# g( b; f  A: u
  6. var str = "这个是测试用的范例文字";0 L* i& w5 V( q* p
  7. var seq = 0;
    ; x% a- O, b, H, v7 ^% v1 E$ Y
  8. var second=1000; //间隔时间1秒钟
    $ A8 I: u6 J3 e8 {: S: N; e( ]4 N
  9. function scroll() {
    5 _# {8 R5 z. B6 n
  10. msg = str.substring(0, seq+1);% {0 X  t/ f" I7 \; G( R) j
  11. document.getElementByIdx_x_x('word').innerHTML = msg;) G- i# }4 b# F
  12. seq++;
    2 p+ R: j, `2 c/ o" c5 V& k
  13. if (seq >= str.length) seq = 0;
    # m/ E1 _5 E& H' e$ a
  14. }
    # d: r/ H; g, v: e  x5 N" I
  15. </script>3 c# L9 l+ y! {# u( T: X+ e7 U
  16. </head>
    0 W/ v7 z( l& X6 }
  17. <body onload="setInterval('scroll()',second)">
    7 {# W# X, j) f  |) r$ L. V4 s' @
  18. <div id="word"></div><br/><br/>
    6 C/ {& y$ @. c
  19. </body>/ }8 @* F! G; |& ^
  20. </html>
复制代码
例2.当焦点在输入框的时候，定时检查输入框信息，焦点不在时不执行检查动作。( b9 R, a+ V7 {
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">' ?1 F8 d4 \5 O! H$ ?
  2. <html xmlns="http://www.w3.org/1999/xhtml">6 Z/ V8 a( y+ t
  3. <head>; ^2 E, b6 e$ A; B" b
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    - Y% D, j; `/ q6 }$ X% `
  5. <title>无标题文档</title>; u6 f2 o. f" U( N
  6. <script language="JavaScript" type="text/javascript">
      f* }9 |, K/ ^' u
  7. var second=5000; //间隔时间5秒钟) F# O; A# K: W) W$ c; n
  8. var c=0;1 }7 q* S: y7 j; }
  9. function scroll() {
    * u. j$ G& ]9 ]' s# H
  10. c++;
    7 E- G3 `$ [+ I5 t
  11. if ("b" == document.activeElement.id) {
    & H: m0 P0 J6 L  {. O, D) d$ T
  12. var str="定时检查第<b> "+c+" </b>次<br/>";; d/ H4 f8 s& S* [* ]( r1 J' i
  13. if(document.getElementByIdx_x_x('b').value!=""){# S  x) N. s$ w  P+ r
  14. str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";- p0 c# r% t4 }, t& g
  15. }8 ], H+ P3 l: y  D! e. k' _
  16. document.getElementByIdx_x_x('word').innerHTML = str;" q3 d4 C. U0 M
  17. }4 H/ w: L* @* T
  18. }2 U( F9 E; U# {9 m) p5 H) J
  19. </script>/ U' {6 i" p1 ^& ~7 j2 g# U
  20. </head>
    1 x0 F0 l  `3 {1 I7 ?' k# B
  21. <body>2 ^8 L0 p7 I. Y% x! G/ j
  22. <textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
    2 f$ c  P" X( W/ j. u; K& j9 l; V
  23. <div id="word"></div><br/><br/>5 U8 i8 |0 o+ d
  24. </body>
    : k! s6 Y% T" g: Z5 F
  25. </html>
复制代码
例3.下面这个是最简单的例子，定时器时间到达后弹出警告窗口。! b+ ^- a; w' r6 I* E
  1. <html xmlns="http://www.w3.org/1999/xhtml">
    8 {6 l  c: m: J/ }( R6 V
  2. <head>% F( l" v; D6 t: B5 L& A
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    3 B! q% c6 P2 p# z
  4. <script language="javascript">
    0 `7 K" o. I/ J) o1 u- U6 ~7 M5 P
  5. function count() {* j5 H4 ^( ?5 ?6 M! R
  6. document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";' s+ d! t: a7 T* W2 p- j4 u3 X
  7. setTimeout("alert('十秒钟到！')",10000)2 k  V: u9 W9 U, ]0 q( T$ C
  8. }
    : h' N: k4 O8 }. C# }4 F
  9. </script>: f# R' Z0 B) j
  10. <body>5 P; C2 q0 [" f1 Q  R$ z) w
  11. <div id="m"></div>
    . V: @% k" d4 I. G
  12. <input TYPE="button" value=" 计时开始" onclick="count()">7 Q6 V4 F" ^* V: D2 ~! G0 b. w
  13. </body>
    , G# H! V; b- B; i  b9 k6 Y7 j+ v
  14. </html>
复制代码
例4:倒计时定时跳转
. u3 q& f9 O6 i: A* @  e2 Z
  1. <html>
    $ Y' s( d, A9 k
  2. <head>
    + T! J! s. \7 Q& f! S; A5 E8 [
  3.   <base href="<%=basePath%>">
    - ~2 C7 `5 F% y0 T* S+ F
  4.   <title>My JSP 'ds04.jsp' starting page</title>/ s" \* e1 f* O: q: G! a
  5.   <span id="tiao">3</span>
    , M( x  A' P5 Y3 [
  6.   <a href="javascript:countDown"> </a>秒后自动跳转……
    4 W! m8 m. X$ Z+ v3 Q/ U
  7.   <meta http-equiv=refresh content=3;url= '/ds02.jsp'/>/ g4 s" o% r3 r9 r
  8.   <!--脚本开始-->9 H  `2 c. [& G- x- l( g7 f
  9.   <script language="javascript" type="">* o- h- @) a& j( _) R2 M. [
  10. function countDown(secs){, z% P3 w7 E4 R4 s
  11. tiao.innerText=secs;
    9 \1 M- s. G" `2 p% Q
  12. if(--secs>0)
    - `7 c) R9 d1 M+ |3 E
  13.   setTimeout("countDown("+secs+")",1000);
    5 b( {6 [+ q, y
  14. }
    $ s  E4 b$ ^0 x/ s5 R
  15. countDown(3);
    . c! \, Y% K0 \. u+ ]" F: A9 {* f/ ?
  16. </script>4 {8 J% Z$ B9 _6 N5 v2 Z2 c' H
  17.   <!--脚本结束-->
    9 s7 V2 v2 P4 g: G0 s6 S
  18. </head>
复制代码
例6:) P* v; A  t8 f! C
  1. <head> + g' n9 u3 R. }; _* O
  2.     <meta http-equiv="refresh" content="2;url='b.html'">
      P% y$ |! w) I1 n8 @
  3. </head>
复制代码
例7:
$ q& Y/ j3 v0 o" i5 Y. N
  1. <script language="javascript" type="text/javascript">
    : W  p+ B$ @. E8 ^
  2. setTimeout("window.location.href='b.html'", 2000);- d0 t( i, F$ d9 g: B( w, h
  3. //下面两个都可以用: O% e1 B; G/ ~- h1 t. |, K
  4. //setTimeout("javascript:location.href='b.html'", 2000);$ t5 W1 [" e: p' ]7 i3 j% u
  5. //setTimeout("window.location='b.html'", 2000);  O3 `  Q$ j# b! |/ x7 m, J) r" i
  6. </script>
复制代码
例8:2 f5 D% p( J8 F( @% s* F  a
  1. <span id="totalSecond">2</span>
    ; l* C5 d3 K! A0 M9 V. y
  2. <script language="javascript" type="text/javascript">
    / K* ~% ^  i- `- @: w  B6 o% n
  3. var second = document.getElementByIdx_x('totalSecond').innerHTML;0 F, e3 W7 c, V. B$ Q
  4. if(isNaN(second)){
    6 m. b: ^8 [) C
  5.   //……不是数字的处理方法
    % A# B1 ^1 c( Z2 E
  6. }else{
    + J  Q" U% p- r4 E
  7.   setInterval(function(){3 k( N; t# G+ r4 ~2 b) y0 _
  8.    document.getElementByIdx_x('totalSecond').innerHTML = --second;: e# a) O! }* W5 Z& n: ]- K
  9.    if (second <= 0) {% F. U+ b: A6 G, g, @9 X9 ?& M, F+ J
  10.     window.location = 'b.html';
    9 H: D1 ^8 }. f0 U0 ~0 M) p
  11.    }3 \: H  \' g3 _3 S$ j0 |9 d& N
  12.   }, 1000);& T, K4 P& M8 F+ V7 d( c, x
  13. }
    / Y1 f( `6 S" B8 P
  14. </script>
复制代码
! S. f) l! W& K- _* s9 K; W9 `
5 z8 |* x) p. f9 \# s" [6 S5 J& p
+ n3 F* |+ x/ ~0 J& r9 {




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