cncml手绘网

标题: js定时器(执行一次、重复执行) [打印本页]
作者: admin    时间: 2018-7-31 10:57
标题: js定时器(执行一次、重复执行)
1，只执行一次的定时器
) S. D6 R; J* k' H, B4 X9 C
  1. <script> , R" C0 K. E7 p9 ^/ Z
  2. //定时器 异步运行
    0 @3 |  O' _4 v6 R) a3 b- r
  3. function hello(){
    6 A% w; l$ d+ R8 ~, ?0 C
  4. alert("hello");
    7 n  a- j6 U. \+ X, q7 S# n
  5. } # {. _# Z+ r# f! r5 w4 J' K
  6. //使用方法名字执行方法
    * l% V" o  U- o) E& \
  7. var t1 = window.setTimeout(hello,1000); - {+ @% Z* v6 r- p. C
  8. var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
    ' {7 @' `5 }8 j
  9. window.clearTimeout(t1);//去掉定时器 7 j5 O6 B3 S$ Z1 n  s$ G
  10. </script>
复制代码
2，重复执行的定时器 + z- W: K# Z: c! h! {
  1. <script> " }, M3 E, p  o/ b( ~' j/ [/ k9 o
  2. function hello(){ 4 s6 N4 F* f8 s
  3. alert("hello"); : k: d( G8 T$ c$ Z+ n
  4. }
    / o9 M. W: C# I% `/ O- E
  5. //重复执行某个方法
    1 E. L) |  O; P! O: t7 J3 |
  6. var t1 = window.setInterval(hello,1000); ( M/ [  S7 r0 J8 K7 B4 F
  7. var t2 = window.setInterval("hello()",3000);
    3 @! Q$ W+ i3 o0 m
  8. //去掉定时器的方法
    3 A1 j; D: K( a2 F1 q
  9. window.clearInterval(t1);
    - `  G! D8 x7 _* S: K5 h# O
  10. </script>
复制代码
备注：
% @8 t1 G* [0 j+ T( W3 T( @0 y+ v  k* S' a* R& U& N
如果在一个页面中有两个方法，都是在页面加载完成之后执行的，实际却未能按先后顺序执行，可以参照如下方法解决：
  g% j9 }# g3 Y: C  {) c. }可以在onload方法中添加一个定时器，设置一个定时器，“延迟”一段时间之后再运行，即可认为区分页面加载运行方法的先后顺序。
+ Y  W7 ?: O4 {* X2 M6 |7 A) X; [+ l/ }

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

1.倒计定时器：timename=setTimeout("function();",delaytime);1 j; B9 k9 t5 Z0 n6 `
2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成4 A7 Y! B: d/ `
“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。+ a' |  z8 {" ~& v. s& O6 D! q
　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。
4 X" Y0 N1 d) _比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，
; \, t% V( m" @0 z. ~% c则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。
+ k1 L8 _2 @$ f& d. i比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。
, k, n; R/ i0 m/ n8 @9 a5 ]setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.
" J  z" I5 `2 M/ A% B0 n' NsetInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象
/ N3 A5 f8 w8 S: M4 ]" M% eclearInterval(对象) 清除已设置的setInterval对象

略举两例。
; j" H1 N* g& J: u$ v例1.表单触发或加载时，逐字输出字符串

) k' n) l0 X7 s. R7 Z. B, f) k
  1. <html>' O$ D) F! I1 q5 O$ Y
  2. <head>) F$ n- m( Q& K( r$ C+ [
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    ( A% I. ?; v% q# G, @
  4. <title>无标题文档</title>% I+ b* O6 F& y6 D0 [8 A$ b: q4 }8 ]
  5. <script language="JavaScript" type="text/javascript">
    $ R" C9 D4 \" r' i* s2 J9 Z, @5 a
  6. var str = "这个是测试用的范例文字";1 o' ]4 u6 i9 h4 k: P
  7. var seq = 0;
    4 L+ |% k% v0 y4 N2 i3 |
  8. var second=1000; //间隔时间1秒钟1 `  |4 e$ ^: y. |& T5 K
  9. function scroll() {
    6 \$ o! `( X" ^4 a( U+ i; c
  10. msg = str.substring(0, seq+1);
    8 U" U3 Q3 _, e, D) t
  11. document.getElementByIdx_x_x('word').innerHTML = msg;
    ! V1 d) N3 s3 b* G1 u
  12. seq++;
    + J: `0 v1 \) `' Q/ d
  13. if (seq >= str.length) seq = 0;
    , I$ L$ {" p6 Y
  14. }
      [1 i0 F5 p5 `7 j: Z1 s/ ^/ a, v
  15. </script>
    5 f7 C% V7 }; ~5 n  s5 k
  16. </head>" K! c4 O3 ~; B, s. b6 H
  17. <body onload="setInterval('scroll()',second)">
    # f, M2 U& O  f. g. G: K! T# z$ O
  18. <div id="word"></div><br/><br/>
    + |- |0 t  `8 k: a
  19. </body>
    ) A- S/ O4 r0 s' R/ |
  20. </html>
复制代码
例2.当焦点在输入框的时候，定时检查输入框信息，焦点不在时不执行检查动作。
7 S- L+ t# ]5 {8 y/ h  B1 a0 h1 h
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">7 m; L1 [5 y- Y; P: i4 ~# m
  2. <html xmlns="http://www.w3.org/1999/xhtml">0 P4 z$ _' s2 |* N4 {
  3. <head>5 `/ q; J5 V' ^  ^
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /># |7 O( }" l( @4 P" [
  5. <title>无标题文档</title>5 R0 {0 F. l- _7 S* X
  6. <script language="JavaScript" type="text/javascript">( e2 \" {! N# a- q
  7. var second=5000; //间隔时间5秒钟/ T; t& E; [- k; I  [9 P
  8. var c=0;8 S$ N" \& s  D6 k2 _: C8 |+ w
  9. function scroll() {+ x4 h; t, E1 E
  10. c++;
    3 ?5 G" Z2 p* o( f! [3 j# N) y
  11. if ("b" == document.activeElement.id) {& T0 p3 R; H( V5 o8 G; V- X
  12. var str="定时检查第<b> "+c+" </b>次<br/>";
    - v4 s" k) r+ E  l7 }; z2 `6 ]) `
  13. if(document.getElementByIdx_x_x('b').value!=""){
    9 i$ ~0 S4 L& M8 X: ~
  14. str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";. [: _6 I. X3 D
  15. }
    , b1 B/ ?# Q$ a2 T1 X% b1 D+ W
  16. document.getElementByIdx_x_x('word').innerHTML = str;- C% Z9 d3 t$ d
  17. }9 p4 B% R9 c# x# G( G: h
  18. }
    8 x7 K) ^0 q8 Y) D2 M- c7 n
  19. </script>
    $ M8 h2 s7 o" m  J3 }4 G0 ~
  20. </head>
    0 k0 r$ ]) t) t! j  d' }3 S
  21. <body>& ^) b* u! c; F+ j7 o4 s0 {
  22. <textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
    , i) _9 m# F! P
  23. <div id="word"></div><br/><br/>8 T& X& C6 S: h7 F& t; C
  24. </body>* n. C& D: @; B- P2 o( z
  25. </html>
复制代码
例3.下面这个是最简单的例子，定时器时间到达后弹出警告窗口。
" e8 H8 R  T! h6 j: t
  1. <html xmlns="http://www.w3.org/1999/xhtml">
    6 X! t7 X0 g. _  g& |
  2. <head>% }! E4 f; m. O
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />! A/ e+ b6 _0 E  j1 f- y2 _
  4. <script language="javascript">; R+ ^9 A8 }; Q+ c
  5. function count() {
    ) b/ |/ X6 z! q) L
  6. document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";
    6 {. `3 u, |; g3 l6 U
  7. setTimeout("alert('十秒钟到！')",10000)
    # o" t% r7 p- C7 V
  8. }
    - l) J' H1 P, w' w" b: {
  9. </script>( R! e, V/ ~! x5 ^
  10. <body>
    6 \1 {$ M+ N8 m. N: P" ?
  11. <div id="m"></div>$ i! a$ x; L6 d* d* _# q
  12. <input TYPE="button" value=" 计时开始" onclick="count()">
      A- {# V: b( c4 b1 M; r% o$ t
  13. </body>; F- M8 D. d+ ^
  14. </html>
复制代码
例4:倒计时定时跳转& M- V: ^+ v6 K
  1. <html>
    ; ?" X$ Z1 y. R0 }
  2. <head>/ }* ]" M& ^) I6 n- C
  3.   <base href="<%=basePath%>">
    4 C% @( L9 a2 N
  4.   <title>My JSP 'ds04.jsp' starting page</title>
    : q5 b' e' U# J
  5.   <span id="tiao">3</span># l  `$ N, B  p2 X
  6.   <a href="javascript:countDown"> </a>秒后自动跳转……4 K! \0 b/ S6 f6 w9 x5 u
  7.   <meta http-equiv=refresh content=3;url= '/ds02.jsp'/>
    ( N8 h+ u) h' b$ P  I9 F
  8.   <!--脚本开始-->! O: E/ i4 q+ x; X5 w' V
  9.   <script language="javascript" type="">) b; a* o$ b! d
  10. function countDown(secs){  Y1 S1 o9 }6 O7 E/ G
  11. tiao.innerText=secs;
    . O4 C% P% V& o+ \
  12. if(--secs>0). h0 u$ `% s( L9 o) @. \* D* d
  13.   setTimeout("countDown("+secs+")",1000);
    - M# C5 |! `0 l$ D* J1 ]. k8 S$ @
  14. }
    8 K4 {4 D2 M2 H; [' ^8 j
  15. countDown(3);
    % p4 R8 o6 ^, A. V: b! Z: O
  16. </script>& B5 k9 @" `9 ?7 K
  17.   <!--脚本结束-->( g- v* z( r2 l9 E' I
  18. </head>
复制代码
例6:
. }5 L' P% q& P4 z! _3 W
  1. <head>
    # n8 c# r5 b0 n! E  n; R
  2.     <meta http-equiv="refresh" content="2;url='b.html'">
    ( {! n6 d- l( o, i) [0 H
  3. </head>
复制代码
例7:& [+ d) b$ i, `; Q# E) k9 j, c
  1. <script language="javascript" type="text/javascript">+ @' _) P9 T. C  C0 I( }/ W& C
  2. setTimeout("window.location.href='b.html'", 2000);) P! m0 `* l2 R: s0 {  r
  3. //下面两个都可以用
    ( h$ k- k) v* w
  4. //setTimeout("javascript:location.href='b.html'", 2000);
    7 e( g8 ?, l6 n" K7 t& V
  5. //setTimeout("window.location='b.html'", 2000);/ N% `# H+ f/ Q, L# t
  6. </script>
复制代码
例8:
9 Z- a" E3 G5 a/ f$ \$ w! |4 V
  1. <span id="totalSecond">2</span>
    ) X" W# E4 s/ h/ f% |7 b
  2. <script language="javascript" type="text/javascript">
    5 r7 F5 M+ a. |4 H/ Z& y
  3. var second = document.getElementByIdx_x('totalSecond').innerHTML;
    . \6 H0 [$ c) g  S% q
  4. if(isNaN(second)){
    7 j) S) H. ^) u7 G2 p$ f
  5.   //……不是数字的处理方法
    ; @( ^. ]1 O0 A9 i( I1 j
  6. }else{
    , h' T& X- X. X
  7.   setInterval(function(){" W* K. C3 o: T+ e; H  g) X
  8.    document.getElementByIdx_x('totalSecond').innerHTML = --second;8 p7 s' M9 x' ?- ]5 l) [' e; E
  9.    if (second <= 0) {" l( C. k& _% G% X* _$ Q
  10.     window.location = 'b.html';
    6 g5 L  _; l$ Q# `
  11.    }' l6 o% B8 I. n+ P2 ~
  12.   }, 1000);
    1 x% V/ X- O! K& C7 \2 v) B$ x2 D
  13. } : A: z, R% C. n6 n& Y9 m4 A+ X
  14. </script>
复制代码

8 P6 E; t! k5 p
/ O) K; l- j+ N8 [/ x5 O  o' u* F- A, \) C




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