您尚未登录,请登录后浏览更多内容! 登录 | 立即注册

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 11101|回复: 0
打印 上一主题 下一主题

[js学习资料] js定时器(执行一次、重复执行)

[复制链接]
跳转到指定楼层
楼主
发表于 2018-7-31 10:57:21 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
1,只执行一次的定时器
! j# U2 ~9 j7 }5 y
  1. <script>
    & m' t! k0 M, P! M0 T6 e, N
  2. //定时器 异步运行 ) \: x$ T0 H- O) A# |7 |% m9 F
  3. function hello(){
    1 B( `' g' e  ~
  4. alert("hello"); # X% z& Y- M1 u9 ~
  5. } 5 I/ t5 y6 Q7 n: J# Y* r" `& u7 b
  6. //使用方法名字执行方法
      k! b& d# a0 v+ C9 K! H
  7. var t1 = window.setTimeout(hello,1000);
    # F, |5 f; ]# O/ s, ]4 n
  8. var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
    ; s- b2 x. |% E# v( y
  9. window.clearTimeout(t1);//去掉定时器
    8 ~: @) [% W9 c9 p5 ^' @% I1 p0 ]
  10. </script>
复制代码
2,重复执行的定时器 : N# x6 R( W# U- F
  1. <script> 9 G: c( ?8 d6 W4 ~& s2 q7 X* H9 L7 B" i! |
  2. function hello(){
    " R  ]2 i4 L0 }* G; k
  3. alert("hello"); 4 X" F* Q* ]* U, q
  4. }
    ) K$ M3 a* n# W$ `6 W% J/ {4 q
  5. //重复执行某个方法 ( [7 C8 v$ Q, H$ a9 ?5 ]) ~% q
  6. var t1 = window.setInterval(hello,1000);
    ; e0 e' N$ L% v8 \2 B0 Q( H, k$ \
  7. var t2 = window.setInterval("hello()",3000);
    6 f( B( v9 W6 a4 z
  8. //去掉定时器的方法
    $ W' v1 m, q" @5 T& w
  9. window.clearInterval(t1);
    + }" A% ]7 h' t; q8 H+ s
  10. </script>
复制代码
备注: 0 e1 E) D' O1 M- g+ P7 O; x: u0 p

' U" f- d9 r: `) \, w如果在一个页面中有两个方法,都是在页面加载完成之后执行的,实际却未能按先后顺序执行,可以参照如下方法解决:
; O- T  D: S; D可以在onload方法中添加一个定时器,设置一个定时器,“延迟”一段时间之后再运行,即可认为区分页面加载运行方法的先后顺序。; k7 D# W5 @/ D- Q

9 Y- b, |' C* G% P

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

1.倒计定时器:timename=setTimeout("function();",delaytime);
5 p% O6 g/ k( N" e6 o2.循环定时器:timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作,可以是一个函数,也可以是几个函数,函数间用“;”隔开即可。比如要弹出两个警告窗口,便可将“function();”换成
% ~6 M+ g9 C; ~# F“alert('第一个警告窗口!');alert('第二个警告窗口!');”;而第二个参数“delaytime”则是间隔的时间,以毫秒为单位,即填写“5000”,就表示5秒钟。
# p8 ]: Q  ^! ~3 f3 L  H. j( [  倒计时定时器是在指定时间到达后触发事件,而循环定时器就是在间隔时间到来时反复触发事件,两者的区别在于:前者只是作用一次,而后者则不停地作用。+ ~7 h5 g6 {9 J
比如你打开一个页面后,想间隔几秒自动跳转到另一个页面,则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ,而如果想将某一句话设置成一个一个字的出现,% W9 x! p% K4 `
则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点,则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。0 R; ^) Q; M7 e3 ?# |# N5 g1 C
比如:if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器:

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间,再进行某项操作。
% _! A8 j' d' Z' f& U+ b6 dsetTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.
/ Y. i4 A" C/ M/ A( ~7 V( xsetInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象
+ K: s/ b& W: a' B5 gclearInterval(对象) 清除已设置的setInterval对象

略举两例。  }) J4 c+ O4 m
例1.表单触发或加载时,逐字输出字符串

4 ]; W3 P8 O8 u( q
  1. <html>
    - X# {, |" {! \2 `( E! p
  2. <head>3 _' f% {, X2 m" Z  u: s6 Q
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />2 F% u! W# `6 v1 J. W6 S4 @& {
  4. <title>无标题文档</title>6 G+ |% P, L+ m( U7 M% D  s
  5. <script language="JavaScript" type="text/javascript">2 ]8 H: _+ s2 s2 R9 s
  6. var str = "这个是测试用的范例文字";/ N. m' Y; u+ u5 q
  7. var seq = 0;
    * p. o* g% b$ Z+ h0 d
  8. var second=1000; //间隔时间1秒钟
    # k6 g) c& ]/ S" x! w' f; I
  9. function scroll() {
    ' P  v5 A7 p6 R- b
  10. msg = str.substring(0, seq+1);8 S! [( O1 m5 {( |8 A9 V
  11. document.getElementByIdx_x_x('word').innerHTML = msg;
    ; M9 J- I; i% w3 n
  12. seq++;
    2 q: W" l; m( K7 _/ s2 ]
  13. if (seq >= str.length) seq = 0;  ?$ }  ?2 T; \8 y* h8 x4 {
  14. }$ p! u3 c  S' G5 t' v8 R0 a
  15. </script>
    3 M3 _$ n$ H+ z1 x4 s: \5 N
  16. </head>1 P" J$ E0 i& V0 P2 F
  17. <body onload="setInterval('scroll()',second)">
    + g4 A8 ^8 o: Z- S/ w9 |
  18. <div id="word"></div><br/><br/>  N/ D/ D' c9 a" V& G" J' a; w2 ]! E
  19. </body>4 ^5 ]& w% ^, i6 F! o7 ^" _2 m
  20. </html>
复制代码
例2.当焦点在输入框的时候,定时检查输入框信息,焦点不在时不执行检查动作。
7 p2 q+ i2 h6 s, T: P: ]1 t
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">5 X9 X. v% {! E- b6 Z' p9 y
  2. <html xmlns="http://www.w3.org/1999/xhtml">5 p0 J5 N; E% Z  e2 P1 V$ X) |0 R
  3. <head>) X$ d/ S8 c, Y. w
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    : X0 b" r0 z. W: i+ t+ k$ R
  5. <title>无标题文档</title>
    ; z: g' o5 K" Q, P$ M# _
  6. <script language="JavaScript" type="text/javascript">  s1 d' }/ t* \: D$ k( L
  7. var second=5000; //间隔时间5秒钟
    0 j' O# p# Y( u$ R
  8. var c=0;
    $ I1 f% t  }5 }8 O% u0 l# y
  9. function scroll() {
    ' n" _0 g4 _9 a& f- k6 o9 W4 [$ Y- i
  10. c++;
    " J. J5 n; q( q: b, s
  11. if ("b" == document.activeElement.id) {  Z) C8 P6 F, f' x9 n
  12. var str="定时检查第<b> "+c+" </b>次<br/>";, r5 T2 M' x: V: k- f& b
  13. if(document.getElementByIdx_x_x('b').value!=""){; M% j5 H4 C- u( o0 W: k
  14. str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";( |) {: s1 O/ c- d- h' r
  15. }
    % ^$ q1 W$ g* K: W3 `) P
  16. document.getElementByIdx_x_x('word').innerHTML = str;" ^. R8 C! ^' L: b3 ]
  17. }7 I. M9 s% ?. F+ _1 r
  18. }: x5 y5 U* h0 x7 G4 I
  19. </script>
    1 N9 W3 B2 s: s% `# d6 P/ F
  20. </head>1 O5 z( R* s# P7 z
  21. <body>
    8 K: e0 M0 ?( k) g
  22. <textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>8 r4 _9 b/ t4 A3 R2 x9 Q9 v
  23. <div id="word"></div><br/><br/>
    ) G3 Y8 }3 O5 f. ~" K8 \% e; Y$ ?
  24. </body>% i& c6 N; |. ~+ c. |
  25. </html>
复制代码
例3.下面这个是最简单的例子,定时器时间到达后弹出警告窗口。
9 _9 I8 s) e, ^' ?4 }
  1. <html xmlns="http://www.w3.org/1999/xhtml">
    ( R+ y; [; J# O% _
  2. <head>
    ( V! s, |) B% Y4 X; U! R) L
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />) E2 F, t6 J8 D
  4. <script language="javascript">
      d7 @. x' b9 {, `
  5. function count() {
    / R/ a) T# W# ?5 O: X/ |
  6. document.getElementByIdx_x_x('m').innerHTML="计时已经开始!";, t- |3 x9 |$ F. z1 q8 k' w
  7. setTimeout("alert('十秒钟到!')",10000)
    # U, G2 B( z) Q; ]
  8. }: E. x& U  W5 s/ N3 }4 G+ e- z
  9. </script>
    7 p7 l) C5 g! A
  10. <body>
    5 G" F  G/ ?3 x' s! D
  11. <div id="m"></div>
    3 ^5 h$ }7 a: W' e! Y& I* ?
  12. <input TYPE="button" value=" 计时开始" onclick="count()">- u( E) @% b" w5 F
  13. </body>
    " z  K' B3 D, t
  14. </html>
复制代码
例4:倒计时定时跳转
8 v& c, \. K: c
  1. <html>
    $ e; w. u0 A* J' n4 q. V: b
  2. <head>, |. \% x, \. f; z6 p, Y, b8 x7 ~6 y: U
  3.   <base href="<%=basePath%>">
    8 {. @, g/ S% O& C& g+ _2 c4 }
  4.   <title>My JSP 'ds04.jsp' starting page</title>( _  o" e4 \$ b
  5.   <span id="tiao">3</span>3 ]8 Q) C: d- t' a& v! o
  6.   <a href="javascript:countDown"> </a>秒后自动跳转……3 h4 N8 u% ]3 ]" }  a# K
  7.   <meta http-equiv=refresh content=3;url= '/ds02.jsp'/>& i. k! I, @2 C: ^
  8.   <!--脚本开始-->. J: f- j+ F* T, m0 s7 Q$ T( Y. ]
  9.   <script language="javascript" type="">
    ; r$ H; M4 b+ M* j: d
  10. function countDown(secs){
    ' M* B8 w3 a6 E) M/ ]& I
  11. tiao.innerText=secs;7 M1 O' i0 z) j+ G, `' S8 L4 F
  12. if(--secs>0)
    " `5 W' h' i" o6 Y& D
  13.   setTimeout("countDown("+secs+")",1000);) o7 ^0 i( J0 m4 K% A+ G
  14. }0 F. P6 v- U, q4 r; t% _+ v5 ^
  15. countDown(3);7 E) W' L# W" R0 l0 }0 J/ L1 I
  16. </script>
    & ]7 R! r' J  O; I/ q: x4 l7 ]
  17.   <!--脚本结束-->) k: V( o+ T5 Z
  18. </head>
复制代码
例6:4 Y& n0 M9 l' |. a. Z+ d, m
  1. <head>
    0 b; n8 V" |8 z1 r* G7 v, Y
  2.     <meta http-equiv="refresh" content="2;url='b.html'"> ; h! w0 F  j  i" o4 ]
  3. </head>
复制代码
例7:! x! ?/ U3 m0 M6 P& ?+ l
  1. <script language="javascript" type="text/javascript">
    : A: ~- q/ ^/ r
  2. setTimeout("window.location.href='b.html'", 2000);8 W. q$ W1 P6 u
  3. //下面两个都可以用2 d* @: p6 p2 p3 E- d' H2 w( Z1 B
  4. //setTimeout("javascript:location.href='b.html'", 2000);
    / j6 q5 {2 o8 \8 A5 n9 |0 ~0 H
  5. //setTimeout("window.location='b.html'", 2000);
    6 W9 g7 D( m0 _5 w% v
  6. </script>
复制代码
例8:
) E; W, I) C/ }
  1. <span id="totalSecond">2</span>0 o( `! V5 T) \
  2. <script language="javascript" type="text/javascript">
    " g8 {& U/ F. T
  3. var second = document.getElementByIdx_x('totalSecond').innerHTML;
    5 k7 ], Z0 p7 y
  4. if(isNaN(second)){
    . H' g- O( v2 V2 x  x* K! D
  5.   //……不是数字的处理方法
    / d9 l3 x# T/ K- G
  6. }else{
    - D0 }: y  Y$ S9 Y2 W, W
  7.   setInterval(function(){* l" U) T* w7 [
  8.    document.getElementByIdx_x('totalSecond').innerHTML = --second;
    8 u8 D. F8 a6 v, L! y
  9.    if (second <= 0) {
      Y/ T! r, n( r2 b" O  j3 g
  10.     window.location = 'b.html';/ H5 K; m2 g3 y8 X. L' h0 A
  11.    }: M" M1 O7 d8 H! S! ]
  12.   }, 1000);9 x/ Z6 L& {. ~
  13. }
    % T9 @$ G2 Y0 c+ U
  14. </script>
复制代码
1 r8 }4 B! P4 o7 ~1 n- B9 v$ M- i
* V8 |  N9 g5 ~0 b* ~& \8 W
4 h( F4 s4 J1 F: F! p+ `, M
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2024-12-23 12:38 , Processed in 0.116754 second(s), 19 queries .

Copyright © 2001-2024 Powered by cncml! X3.2. Theme By cncml!