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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

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

[复制链接]
跳转到指定楼层
楼主
发表于 2018-7-31 10:57:21 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
1,只执行一次的定时器
+ k" w- A! L, j' R* n. q) U5 r& x
  1. <script> 8 W: H" h4 d& C: }: k
  2. //定时器 异步运行 0 U0 e& @+ m$ B! W4 W% s! J- J+ t
  3. function hello(){
    ( d% e$ H$ a  X6 [1 a! i
  4. alert("hello"); 5 N7 {3 _! {2 D, [: ~+ a
  5. }
    1 m2 w- I/ @% V- Q  W( d4 C
  6. //使用方法名字执行方法 " R4 d) l3 g% {2 G3 M  Y! b2 |
  7. var t1 = window.setTimeout(hello,1000); 6 h/ [7 k* m' h$ x1 z& Q9 C
  8. var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 0 q1 C6 z' Y! T1 |3 @
  9. window.clearTimeout(t1);//去掉定时器
    6 O1 ]% z5 j2 x
  10. </script>
复制代码
2,重复执行的定时器 4 p9 h! q) c' }% o! C
  1. <script> 9 J9 ~& t( Y$ A% W9 s
  2. function hello(){
    0 S2 x' [3 ~+ K7 s7 J
  3. alert("hello"); 1 [, A; |) O. x, _5 a. R/ E
  4. }
    7 s# R+ o6 I# p7 Z. q$ i5 `% H
  5. //重复执行某个方法
    / A# x& A2 A% x  s7 u
  6. var t1 = window.setInterval(hello,1000);
    / p# R' b) S5 v* d! ^# n
  7. var t2 = window.setInterval("hello()",3000); 1 Q3 n  h6 f& |: `1 l6 a1 f7 l
  8. //去掉定时器的方法
    2 x( \0 i. }) Q' k4 D( E
  9. window.clearInterval(t1);
    + I+ l& \" i& C1 r
  10. </script>
复制代码
备注:
# ~# H. z& r' a6 Y. t# `1 C
1 |3 L: U  S' }% @6 c  [如果在一个页面中有两个方法,都是在页面加载完成之后执行的,实际却未能按先后顺序执行,可以参照如下方法解决:
/ J' O. M* b6 b' ~可以在onload方法中添加一个定时器,设置一个定时器,“延迟”一段时间之后再运行,即可认为区分页面加载运行方法的先后顺序。: w$ T2 W1 _; H5 v* H

( F( f5 Z4 G# m$ A

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

1.倒计定时器:timename=setTimeout("function();",delaytime);
0 j8 g0 `; C+ s3 {. F4 S. C: j$ N2.循环定时器:timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作,可以是一个函数,也可以是几个函数,函数间用“;”隔开即可。比如要弹出两个警告窗口,便可将“function();”换成$ A6 f' N$ `" Y
“alert('第一个警告窗口!');alert('第二个警告窗口!');”;而第二个参数“delaytime”则是间隔的时间,以毫秒为单位,即填写“5000”,就表示5秒钟。" b' p. k/ [7 r* l, r3 ]
  倒计时定时器是在指定时间到达后触发事件,而循环定时器就是在间隔时间到来时反复触发事件,两者的区别在于:前者只是作用一次,而后者则不停地作用。1 k& D0 b. ^& h* W2 @
比如你打开一个页面后,想间隔几秒自动跳转到另一个页面,则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ,而如果想将某一句话设置成一个一个字的出现,  @! w- D2 o- M% [
则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点,则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。
' T9 X+ S* n5 d; P  b7 |2 x' B比如:if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器:

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间,再进行某项操作。
0 I; t. J1 |3 _/ b& I; UsetTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.
: C$ ~  W0 ]2 s7 VsetInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象$ [  z8 X( ]# W, X4 r
clearInterval(对象) 清除已设置的setInterval对象

略举两例。
- H0 E8 A( S) a4 B9 Z& S/ H3 f例1.表单触发或加载时,逐字输出字符串

' S9 {7 B2 W( q# [" ?
  1. <html>% b8 ]# E+ y6 X) V& V2 s/ c
  2. <head>
    * i% z. S9 u5 w- W
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />8 J- D$ @; B! `  g  @
  4. <title>无标题文档</title>
    $ H( B( M1 i4 j0 Z7 R" ?5 [1 |
  5. <script language="JavaScript" type="text/javascript">/ y2 z% j2 k. o; M
  6. var str = "这个是测试用的范例文字";  M# S! ^# Z8 Q8 Z
  7. var seq = 0;9 F! |4 Q7 H# k
  8. var second=1000; //间隔时间1秒钟) o0 c& r! [9 c4 g# h  w" f
  9. function scroll() {
      y6 Y4 x4 t9 h" y8 y  T  {
  10. msg = str.substring(0, seq+1);
    , R* S) k: v4 d( M2 m+ f
  11. document.getElementByIdx_x_x('word').innerHTML = msg;
    2 t1 [  _$ f& G% e! g2 J4 C. ^; ^0 K7 A
  12. seq++;# N. [# ~2 ^9 y7 K3 u( \5 ^$ Y$ S$ _' k
  13. if (seq >= str.length) seq = 0;
    7 V! I* [+ R6 Q, k
  14. }
    1 q) f! ]" d8 A  @: {7 g- P
  15. </script>
    : Q* @1 ?! G* k: G! _
  16. </head>
    # Y4 s( j# {; K- T
  17. <body onload="setInterval('scroll()',second)">% W8 z5 M* p- f/ A; Y! M% k
  18. <div id="word"></div><br/><br/>! Y- Z8 k! Y* G/ d5 D
  19. </body>
    ) v+ \% o; Q  C4 k' N; j* T  r
  20. </html>
复制代码
例2.当焦点在输入框的时候,定时检查输入框信息,焦点不在时不执行检查动作。- S0 J& ^( i; I/ f7 Y/ m9 i4 c
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">; @4 q4 \0 ~2 v* y3 w8 R
  2. <html xmlns="http://www.w3.org/1999/xhtml">
    1 {% \* m# G( Y: A& p
  3. <head>
    & X( f1 y/ Q7 p& W8 e" c$ S
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    ( T4 G, Y, S8 `/ F
  5. <title>无标题文档</title>
    2 ^1 P+ e# C. @' A. ]6 _0 q& F1 X
  6. <script language="JavaScript" type="text/javascript">
    3 g6 Y" Q8 P: W( X
  7. var second=5000; //间隔时间5秒钟5 V4 q+ C6 L: a, r2 o; T; t3 |
  8. var c=0;
    " b2 Z* `* w# b: P9 {- r" g$ M
  9. function scroll() {! ]( o/ K: J6 s5 t- s1 s' ^' q
  10. c++;
    : a6 Y! M" _. z0 O
  11. if ("b" == document.activeElement.id) {2 c  R, k! Y: |1 S: ^; [% }
  12. var str="定时检查第<b> "+c+" </b>次<br/>";# g' ?& v! A, V0 R6 x1 @# D
  13. if(document.getElementByIdx_x_x('b').value!=""){
    : O; y# h% ?: p/ U
  14. str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
    " g: ~+ k4 w# d2 c0 V9 r
  15. }! p% i8 ]$ H5 F! Z
  16. document.getElementByIdx_x_x('word').innerHTML = str;
    ) ^. S0 x4 d- p/ u1 q* A
  17. }
    : K8 b: `$ Z* V* l+ n' |
  18. }
    6 U) {- u  o: o6 |$ j' f) ?8 x" I
  19. </script>
    0 w, k8 n" |9 u& y* x. i
  20. </head># f8 X' u  Z9 P) L1 ^
  21. <body>
    & M" i* J, u$ D1 Z5 h
  22. <textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>& [) s& a9 D6 O2 a
  23. <div id="word"></div><br/><br/>1 l! {; m! A, [9 ?
  24. </body>2 O# e3 y. C6 ~# W% p9 v& G
  25. </html>
复制代码
例3.下面这个是最简单的例子,定时器时间到达后弹出警告窗口。
# N' v$ Q( d3 f9 c
  1. <html xmlns="http://www.w3.org/1999/xhtml">3 D) S& r9 K' ~3 c  @
  2. <head>
    9 }: `6 S% V) X
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    , P& C9 a  y# ]- c
  4. <script language="javascript">
    ( R, I! O. s. p. r; X1 N' ?9 K
  5. function count() {% m7 o, |% J% q4 R" F' w
  6. document.getElementByIdx_x_x('m').innerHTML="计时已经开始!";) _4 a) a' T1 I* b: r
  7. setTimeout("alert('十秒钟到!')",10000)* @0 f% i7 L/ j7 l9 Y6 @" _
  8. }
    # i# l5 r1 F/ d0 ^* f! B+ N
  9. </script>+ `& O+ _' f1 H& g/ C5 r
  10. <body>  Z- p# L' m2 s
  11. <div id="m"></div>' x& t  f9 P- _& {
  12. <input TYPE="button" value=" 计时开始" onclick="count()">+ H* i4 U* f3 @0 M
  13. </body>
    $ s$ o! I0 n) `
  14. </html>
复制代码
例4:倒计时定时跳转# G4 B' ]: y+ x
  1. <html>
    " U5 p( j' R3 e4 D9 }
  2. <head>5 r5 i6 _4 h. G) v# R
  3.   <base href="<%=basePath%>">( f+ x: o+ |1 X  z$ W" g* z
  4.   <title>My JSP 'ds04.jsp' starting page</title>
    ! {! y, j8 b: H8 f3 C
  5.   <span id="tiao">3</span>/ Q+ B9 X0 z* n
  6.   <a href="javascript:countDown"> </a>秒后自动跳转……4 W1 j' j/ D4 z  J/ c& k
  7.   <meta http-equiv=refresh content=3;url= '/ds02.jsp'/>+ P4 q/ B4 O# i) Y  a3 P( `
  8.   <!--脚本开始-->  i1 `  H8 O8 p) ]; n
  9.   <script language="javascript" type="">9 |2 i1 \) d% N( [
  10. function countDown(secs){8 ~0 S- X' U; ]( F1 X
  11. tiao.innerText=secs;
    1 Q/ G5 O4 s1 }- ~; h) p
  12. if(--secs>0)
    & O5 W( u/ n; }& I- o) p8 ?
  13.   setTimeout("countDown("+secs+")",1000);' N/ B' N; H2 I2 R7 }5 l" }
  14. }
    ' {- o- s. ^8 p) g+ S
  15. countDown(3);/ a3 i" g. K6 s' D" A
  16. </script>/ y( o, _$ b+ U* O* [8 y- s" B
  17.   <!--脚本结束-->- j. S5 n) A% Z
  18. </head>
复制代码
例6:# S* j) g' \" w7 G2 [4 T! O
  1. <head>
    % M. \4 o( H9 {& G, t1 N
  2.     <meta http-equiv="refresh" content="2;url='b.html'"> ( S% q" t5 c* G1 L+ p& P9 b0 C
  3. </head>
复制代码
例7:
5 ?1 |7 y, s( I. d- ~9 V. o  T
  1. <script language="javascript" type="text/javascript">) {1 F, n( P' q
  2. setTimeout("window.location.href='b.html'", 2000);! [/ |1 M& h  z* N, y1 W
  3. //下面两个都可以用4 }5 g& b% U  g3 {
  4. //setTimeout("javascript:location.href='b.html'", 2000);4 x" I, E8 u: y' d3 [
  5. //setTimeout("window.location='b.html'", 2000);6 X' K4 U# M# Z; k$ C2 }& p
  6. </script>
复制代码
例8:1 O+ e2 h. ~* g: H
  1. <span id="totalSecond">2</span>3 }% b7 }+ t, M* i# i
  2. <script language="javascript" type="text/javascript">
    : S( L( N  _+ r
  3. var second = document.getElementByIdx_x('totalSecond').innerHTML;( J/ ?" P) ~% p1 ^! [" T: ^- e
  4. if(isNaN(second)){
    6 U% A# m# B% ?& `; b
  5.   //……不是数字的处理方法) P- u- T% c, O9 S+ S$ d' s  Y& w
  6. }else{; F' _1 b* n/ `% f! S  W) w
  7.   setInterval(function(){
      u* g0 J5 [, [0 f, j3 |, u
  8.    document.getElementByIdx_x('totalSecond').innerHTML = --second;8 l+ B2 A3 a% A2 ~/ L
  9.    if (second <= 0) {" s$ ?. R" A* @5 V
  10.     window.location = 'b.html';
    , m7 B1 o0 }* P
  11.    }0 m5 n- C; q/ ?6 x
  12.   }, 1000);9 C& a& U! r) J
  13. } 7 \* E$ j/ ~* h
  14. </script>
复制代码

. {7 [) W& a7 B0 k, e5 B' e( \* |3 j
3 R9 _$ F# q( z2 X0 c8 _5 q
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2024-12-22 21:29 , Processed in 0.105139 second(s), 19 queries .

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