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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

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

[复制链接]
跳转到指定楼层
楼主
发表于 2018-7-31 10:57:21 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
1,只执行一次的定时器
  P* p: @; ^, Z
  1. <script> & p. |3 g1 r- E/ |. M
  2. //定时器 异步运行
    $ U, `' F4 T( a* x" y
  3. function hello(){ & \  M7 h3 o+ y  D  \+ i
  4. alert("hello");
    9 S& u- B7 `: W) j  c
  5. }
    / P- Z6 j$ {' ^; Q1 j
  6. //使用方法名字执行方法 0 D( q+ w2 e. W) M6 v
  7. var t1 = window.setTimeout(hello,1000); ; Y" A0 T( V' D7 z. ], d1 B0 ^
  8. var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
    9 @0 h3 @; h$ V: {3 y
  9. window.clearTimeout(t1);//去掉定时器
      \8 F( M8 }4 r
  10. </script>
复制代码
2,重复执行的定时器 3 i0 f* i: Q8 c( I0 t6 F
  1. <script> & h. s+ A9 C, K8 v: s; Z
  2. function hello(){
    2 Q3 W+ L& k( X3 m+ f2 a% F2 g
  3. alert("hello");
    # |' J0 K" X- _8 y# \6 w
  4. }
    4 f* l: B  P4 C$ o) e
  5. //重复执行某个方法
    + v9 d1 R, x: _! {5 m
  6. var t1 = window.setInterval(hello,1000);
    $ _0 V1 O  K0 ]. D3 y
  7. var t2 = window.setInterval("hello()",3000);
    : O! x6 {) p) G, m$ O
  8. //去掉定时器的方法 ) ~+ Q( [& e$ ~! D" O9 b
  9. window.clearInterval(t1);
    3 G9 G+ c" g5 q. D: D
  10. </script>
复制代码
备注: 0 p4 d# q& U1 s9 J: H+ P- q
( m4 p; M/ e0 n: p% E
如果在一个页面中有两个方法,都是在页面加载完成之后执行的,实际却未能按先后顺序执行,可以参照如下方法解决: 3 F& i- h  ~, R
可以在onload方法中添加一个定时器,设置一个定时器,“延迟”一段时间之后再运行,即可认为区分页面加载运行方法的先后顺序。# k! x. R& {& A+ f. R, T

: M0 l7 a/ Q% S* y$ d0 B, e1 }# ^

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

1.倒计定时器:timename=setTimeout("function();",delaytime);
- r) E  i# K) R2 A2.循环定时器:timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作,可以是一个函数,也可以是几个函数,函数间用“;”隔开即可。比如要弹出两个警告窗口,便可将“function();”换成( z# M+ h2 A6 ]
“alert('第一个警告窗口!');alert('第二个警告窗口!');”;而第二个参数“delaytime”则是间隔的时间,以毫秒为单位,即填写“5000”,就表示5秒钟。8 N9 E' t3 \: a- F0 C
  倒计时定时器是在指定时间到达后触发事件,而循环定时器就是在间隔时间到来时反复触发事件,两者的区别在于:前者只是作用一次,而后者则不停地作用。8 p+ j4 T! ~$ x' R  {! v, b
比如你打开一个页面后,想间隔几秒自动跳转到另一个页面,则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ,而如果想将某一句话设置成一个一个字的出现,9 }* v5 i* I8 J" q2 z" r/ \
则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点,则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。
# R. K1 v: B6 c' D: |& H比如:if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器:

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间,再进行某项操作。  I! b4 u3 E* p
setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.
6 [; Z+ }* [6 [; C; \setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象
  }, ]  {, W$ n9 bclearInterval(对象) 清除已设置的setInterval对象

略举两例。* |! X- g/ ]# X% l
例1.表单触发或加载时,逐字输出字符串


- C0 k( t$ y8 I/ c4 [
  1. <html>; _5 x$ c2 f( R% n( z$ |
  2. <head>( D" k/ i/ ?! v) ?  U2 N. w9 Q
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />7 m) s: _4 Q3 g7 h3 Y9 |
  4. <title>无标题文档</title>: M' U6 C' J% d3 C
  5. <script language="JavaScript" type="text/javascript">
    ) |. ~% D. ?5 r- n2 W
  6. var str = "这个是测试用的范例文字";
    ; O  ?$ ^4 c+ q3 X
  7. var seq = 0;1 P& N5 G8 c( O) r, @9 I9 O6 N4 ]
  8. var second=1000; //间隔时间1秒钟7 H% y' k% P; _& D* R
  9. function scroll() {7 G, ^. T/ U6 ?2 D
  10. msg = str.substring(0, seq+1);
    7 e" T) S$ m6 B0 F) d8 T
  11. document.getElementByIdx_x_x('word').innerHTML = msg;
    3 b' s/ z- b) i0 s
  12. seq++;
    4 X1 m0 n/ ^$ k. ]  z! m
  13. if (seq >= str.length) seq = 0;8 `0 v9 O& Z7 Z* k7 j
  14. }8 a  ]- B$ B2 |+ M; m7 K! V( ~
  15. </script>
      K: T2 g) f4 R, w/ [* [
  16. </head>
    . W* e) `5 W3 B( H+ C
  17. <body onload="setInterval('scroll()',second)">7 J( J" ]+ T# O" Q% e4 N7 V
  18. <div id="word"></div><br/><br/>
    5 u& R1 x5 A+ r1 V
  19. </body>
    / D  r2 G9 @% g
  20. </html>
复制代码
例2.当焦点在输入框的时候,定时检查输入框信息,焦点不在时不执行检查动作。
, b6 y. I% M3 g0 j% c$ z
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">' a# p' q5 x5 w( A, u
  2. <html xmlns="http://www.w3.org/1999/xhtml">
    , _+ |+ Q7 @3 ^% ]* L% X2 i
  3. <head>) o' y! p4 l; e. j4 W0 N& }
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />+ o: a& \" |' s% Z" \
  5. <title>无标题文档</title>
    / p& M# R% y. h# v$ M* S
  6. <script language="JavaScript" type="text/javascript">3 A% C' G' ]2 s" f3 y1 o+ H
  7. var second=5000; //间隔时间5秒钟
    ) h' P. i5 M9 h5 W# g. w0 }, A
  8. var c=0;
    $ D  |& z  O6 {( i" t. S* r/ g. u
  9. function scroll() {
    9 Z6 d: J2 ^( h- z4 J  Y9 X& I
  10. c++;
    5 L3 y/ Y; X( x. Y9 [
  11. if ("b" == document.activeElement.id) {
    , m/ V' U4 h' N( j8 Y. o
  12. var str="定时检查第<b> "+c+" </b>次<br/>";
    ) U, ^# ^; f, a
  13. if(document.getElementByIdx_x_x('b').value!=""){$ I  `) j  l- q: a: t# q; U# i$ X
  14. str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";; P9 F2 p4 j2 D
  15. }3 d/ o6 A% x, w/ K
  16. document.getElementByIdx_x_x('word').innerHTML = str;& V7 J9 M" n: z2 R# m
  17. }
    4 B5 f* P! X& Q: \% b) I
  18. }. N% ]: c- o/ W: j, a' |, G7 V
  19. </script>" ]" x9 k: P- e+ D+ u5 m9 t: b
  20. </head>
    ; [/ M3 i9 \! D! f5 t8 y
  21. <body>& G% L- `% j/ m5 }9 L
  22. <textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>1 K- C% d; A8 Z$ z0 ]
  23. <div id="word"></div><br/><br/>2 `  ?+ T( ]' Y7 j& q6 b
  24. </body>% F6 b! s3 i! Q; h. I' o4 U; N* n
  25. </html>
复制代码
例3.下面这个是最简单的例子,定时器时间到达后弹出警告窗口。
9 A" ^" {  s. i( P  J5 h
  1. <html xmlns="http://www.w3.org/1999/xhtml">9 M. `$ h$ J! D
  2. <head>5 T# ]' ]) C; h0 _) h. R. V9 W
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    ; Q- h3 Y! a1 s( A
  4. <script language="javascript">& S9 z" ~- ?2 R/ Z; _9 e
  5. function count() {( Y4 Q* w# u% T5 @
  6. document.getElementByIdx_x_x('m').innerHTML="计时已经开始!";0 G, }2 F, _- s( i1 V! c
  7. setTimeout("alert('十秒钟到!')",10000)
    0 z  R: ]+ `  \% z2 C
  8. }- _( i+ C4 k/ j0 \  [
  9. </script>* C/ n5 O3 m) v( G7 |0 I
  10. <body>
    . B. f5 S/ F6 O# b
  11. <div id="m"></div>
    0 w( N9 h$ [- i5 s0 w7 V7 F. j
  12. <input TYPE="button" value=" 计时开始" onclick="count()">6 G0 V9 U; w( P5 X) o: P- M
  13. </body>
    , e: W3 b5 _# e, L. b2 u' R
  14. </html>
复制代码
例4:倒计时定时跳转
) P0 m* C0 w+ S) ~9 O: c( i
  1. <html>  u' W* q  J- C7 ]
  2. <head>
    7 v* p5 N6 M7 M4 n
  3.   <base href="<%=basePath%>">
    - e4 f+ O) `' ^
  4.   <title>My JSP 'ds04.jsp' starting page</title>& H9 a0 M% T3 Y5 M: I
  5.   <span id="tiao">3</span>8 v+ l6 [/ W: D4 [. f& a
  6.   <a href="javascript:countDown"> </a>秒后自动跳转……
    # O' W9 `' U( p+ {% y& Y
  7.   <meta http-equiv=refresh content=3;url= '/ds02.jsp'/>
    " }) R1 e* V3 z. n3 A# T
  8.   <!--脚本开始-->. Y( ?1 y! v/ e
  9.   <script language="javascript" type="">, R( k9 |& g9 U0 p: o% C6 ^1 l
  10. function countDown(secs){
    ) H7 g7 I* v( r9 }- w; A
  11. tiao.innerText=secs;
    , n: _7 X) q, Z! d8 ^
  12. if(--secs>0)$ l/ z- R) Z5 G" |
  13.   setTimeout("countDown("+secs+")",1000);. a5 Z. p7 V4 J. `: h, O
  14. }
    ; ?8 @/ w1 A' G$ E: O8 n8 O
  15. countDown(3);
    8 ^0 R: F3 ~3 x/ Z, E+ e
  16. </script>, q, v3 e) r( i
  17.   <!--脚本结束-->
    9 q: H9 y: _0 b! I
  18. </head>
复制代码
例6:/ R2 l( A: B4 W
  1. <head>
    & v( q% W5 v4 a2 ^, f2 s
  2.     <meta http-equiv="refresh" content="2;url='b.html'"> / l2 z9 [. _: z5 C# v7 {
  3. </head>
复制代码
例7:" t$ X9 ]# F- c# ]
  1. <script language="javascript" type="text/javascript">: |! X$ n( V5 w0 l* n* D6 s
  2. setTimeout("window.location.href='b.html'", 2000);
    : b2 L% q  `! Q) X  U
  3. //下面两个都可以用) V2 q' j6 v  V" E
  4. //setTimeout("javascript:location.href='b.html'", 2000);0 t+ s6 a; y+ A3 u/ h
  5. //setTimeout("window.location='b.html'", 2000);7 m/ H% n2 m5 X( R: K2 E
  6. </script>
复制代码
例8:
0 p) u8 @9 W6 y% @1 R
  1. <span id="totalSecond">2</span>
    $ \# K1 j# F$ V$ m- M. E
  2. <script language="javascript" type="text/javascript">! R1 i5 r, X: O
  3. var second = document.getElementByIdx_x('totalSecond').innerHTML;+ i, @5 @4 X" g( c7 c' t  K3 e1 _
  4. if(isNaN(second)){' g# E9 Q3 v$ G7 V; I  o
  5.   //……不是数字的处理方法
    ( ^$ I: {3 V* F, B; I. ^
  6. }else{% f( Z4 j: D4 r/ P' e
  7.   setInterval(function(){
    ' J7 a/ h( t; `6 f6 `! k
  8.    document.getElementByIdx_x('totalSecond').innerHTML = --second;
    8 \. T1 O# z. |
  9.    if (second <= 0) {
    : n, T1 \7 n( ^7 H5 B5 k
  10.     window.location = 'b.html';* E' q, X6 U8 Y1 P' S  A' H# n
  11.    }
    # H' T4 @/ u: y- x: c5 q" B; e
  12.   }, 1000);
    ; k/ s' X9 e% T; s2 G# j
  13. }
    7 b6 I% p6 i) T$ x5 l
  14. </script>
复制代码
7 Y4 |6 r+ d! n2 O1 L
2 v: d4 i- A, m* {
& u6 C4 F) N- }3 ]
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-8-4 13:38 , Processed in 0.057075 second(s), 19 queries .

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