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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

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

[复制链接]
跳转到指定楼层
楼主
发表于 2018-7-31 10:57:21 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
1,只执行一次的定时器   R: l) p, I& y9 Y, p- F0 y: j
  1. <script>
    * B# [5 e( {% R- t5 H3 n7 I- X9 G
  2. //定时器 异步运行
    + m; h) W, e( O" N" d0 W4 }8 z
  3. function hello(){ % _+ I2 S, @6 I, \5 X
  4. alert("hello");
    3 k# O5 m. n3 S
  5. } 2 Y0 L& @' M% i: i
  6. //使用方法名字执行方法 7 y2 }% K! E; K; J! E2 R1 G4 N3 T
  7. var t1 = window.setTimeout(hello,1000); / l. ~; g+ }% j$ j  z1 k2 ~  r
  8. var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
    2 U* p' [7 a- ?: w$ k
  9. window.clearTimeout(t1);//去掉定时器
    ; Z6 [  b1 u6 C4 u, M
  10. </script>
复制代码
2,重复执行的定时器 % J( \0 v& `, X4 U/ o' m( P* o
  1. <script>
    6 N! @+ S) w% R
  2. function hello(){ 4 x( e2 K5 V; e, M- {
  3. alert("hello"); 1 t8 c; F) e/ n; A+ {
  4. }
    ' A9 _5 R: S7 W& d
  5. //重复执行某个方法
    : S0 N& J$ U, L; B* I
  6. var t1 = window.setInterval(hello,1000);
    ; Y. o, I* z& C  E+ y
  7. var t2 = window.setInterval("hello()",3000); 3 S6 q- I; s4 m) m
  8. //去掉定时器的方法
      g. K. Z+ K# X- L. G" U+ s
  9. window.clearInterval(t1);
      }9 p  q1 s& h3 Q0 A
  10. </script>
复制代码
备注: ; a" h4 y% X3 @& l, ?

, k# ~$ }4 z9 X6 l如果在一个页面中有两个方法,都是在页面加载完成之后执行的,实际却未能按先后顺序执行,可以参照如下方法解决:
- p9 z% ]+ \: v( R1 r  Q可以在onload方法中添加一个定时器,设置一个定时器,“延迟”一段时间之后再运行,即可认为区分页面加载运行方法的先后顺序。
, z$ M, v& e2 b4 A9 \
7 C. b6 r2 g2 {' ], x

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

1.倒计定时器:timename=setTimeout("function();",delaytime);  k: L/ U6 C3 q6 z1 f: ^
2.循环定时器:timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作,可以是一个函数,也可以是几个函数,函数间用“;”隔开即可。比如要弹出两个警告窗口,便可将“function();”换成* v% J& r* X, f: B$ b$ U5 o, q2 D
“alert('第一个警告窗口!');alert('第二个警告窗口!');”;而第二个参数“delaytime”则是间隔的时间,以毫秒为单位,即填写“5000”,就表示5秒钟。
# L3 @0 e, k3 a& u& h  倒计时定时器是在指定时间到达后触发事件,而循环定时器就是在间隔时间到来时反复触发事件,两者的区别在于:前者只是作用一次,而后者则不停地作用。! p% [8 F' f! @' z5 K- {
比如你打开一个页面后,想间隔几秒自动跳转到另一个页面,则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ,而如果想将某一句话设置成一个一个字的出现,, L& L* I- F7 S
则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点,则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。3 n& i# Z7 ?, z0 Z& V, u1 {$ ?6 ^
比如:if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器:

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间,再进行某项操作。# U$ }. X" j, S5 ?0 A- j
setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.0 F1 s3 q; T; p2 I! |
setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象
+ j' h6 \7 l9 L: {# IclearInterval(对象) 清除已设置的setInterval对象

略举两例。
5 v# T+ v+ j" D# I9 `例1.表单触发或加载时,逐字输出字符串

5 J3 Z$ g2 z# V# r, P. _: {: y
  1. <html>
    5 ^- J. i/ a1 G* Z
  2. <head>! ?# i  d. Z) v% `
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /># T3 w: L  j! a) T5 |8 P% W/ n* F
  4. <title>无标题文档</title># r/ C* J7 o6 F0 Z5 j1 D# R9 M/ y1 e
  5. <script language="JavaScript" type="text/javascript">
    - o" l. {% x! ^3 _# {2 Z0 W7 L
  6. var str = "这个是测试用的范例文字";- d! G! O( P3 W
  7. var seq = 0;: S: D( W; {- _+ I+ I, D# _- n& e
  8. var second=1000; //间隔时间1秒钟
    8 K" r' z9 \2 y' [2 a
  9. function scroll() {: O: P& w$ A" E3 n, C; B
  10. msg = str.substring(0, seq+1);
    # d) H2 N( F3 n7 m
  11. document.getElementByIdx_x_x('word').innerHTML = msg;& L* a$ C, \8 l- `' \
  12. seq++;+ v0 |5 F, U- S6 b3 A  T$ U
  13. if (seq >= str.length) seq = 0;
    : e$ ]7 s, q+ R( u3 C, G( t
  14. }0 B# X0 C2 D$ i1 F3 C, k% M# v9 w% y
  15. </script>
    ! l/ J$ n6 A2 \/ R2 F' V
  16. </head>
    / o. V0 N! L+ G  Q0 A0 k0 _% v! i
  17. <body onload="setInterval('scroll()',second)">9 W5 Q1 Q# {4 X, k8 W: A! Z6 A! B
  18. <div id="word"></div><br/><br/>" S9 S1 Y  H! n& m# {; X
  19. </body>9 |  {( [3 [. n( _
  20. </html>
复制代码
例2.当焦点在输入框的时候,定时检查输入框信息,焦点不在时不执行检查动作。
6 Y0 k, L2 u! e; z  C
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    / u& w7 {/ t& {* [
  2. <html xmlns="http://www.w3.org/1999/xhtml">
    ( e7 y/ k( H6 M1 [* U1 R
  3. <head>
    5 I1 y3 [; E1 F. h
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    3 o2 k) @1 z7 a
  5. <title>无标题文档</title>8 R3 t. v' U% \1 I- a5 D7 {% s
  6. <script language="JavaScript" type="text/javascript">" J+ B2 l6 R" _4 Y
  7. var second=5000; //间隔时间5秒钟, O* [! r7 `6 `+ \; A# l3 y
  8. var c=0;) r5 T4 [# b* y1 D+ A9 N
  9. function scroll() {* B( s& G2 w. L9 v4 d
  10. c++;
    $ Y# ~( ]' \$ s# W
  11. if ("b" == document.activeElement.id) {( H& r5 h% K+ _/ h' u
  12. var str="定时检查第<b> "+c+" </b>次<br/>";: O. q1 f5 l2 _/ Y
  13. if(document.getElementByIdx_x_x('b').value!=""){/ C, Q4 x' O# \% }, f* r: O
  14. str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
    , p) A# ?7 a2 L# h
  15. }
    ' J  `% \; C: {9 b2 h: N; J1 A
  16. document.getElementByIdx_x_x('word').innerHTML = str;
    & [" B1 K) I2 I
  17. }1 v8 Y! ?  f0 M- h2 x9 N. ]
  18. }
    ' d, }7 I" U- t4 @0 Z; o( C+ z
  19. </script>$ v: c3 u3 L* D2 f# ^2 a
  20. </head>
    0 K( @& a6 q5 m/ H+ Q( {
  21. <body>! T/ }6 ]: h. Q- d' E6 M
  22. <textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>% y: P1 g$ T( V; m2 D9 R) f
  23. <div id="word"></div><br/><br/>
    4 ~/ \: M6 k1 m6 L( Q* ]" a; m
  24. </body>% z" ^! u: K5 l, C  L  K& S
  25. </html>
复制代码
例3.下面这个是最简单的例子,定时器时间到达后弹出警告窗口。
% a/ @5 g- N  M" s) Z8 a
  1. <html xmlns="http://www.w3.org/1999/xhtml">- A% r" k! K% T$ V. ]: C4 X
  2. <head>3 a- r; w2 a1 J
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    9 T, ^0 @: B. Z+ `
  4. <script language="javascript">
    - K" g. j3 ~2 h6 u
  5. function count() {
    # T8 c9 ^/ Q7 `7 c2 @5 M, M
  6. document.getElementByIdx_x_x('m').innerHTML="计时已经开始!";
    0 |2 y' N. f2 w
  7. setTimeout("alert('十秒钟到!')",10000)9 D- F* t3 }' [- L" G8 ]
  8. }
    / {& c3 ~: \* r2 P9 Q' K( ]' Y  C
  9. </script>
    - G! l8 J0 t2 M# ]' \. A9 R! f
  10. <body>- n2 u3 Y8 s: r1 P, ?( E
  11. <div id="m"></div>% r2 f0 C1 Q, D8 L  Y
  12. <input TYPE="button" value=" 计时开始" onclick="count()">. v! C* n6 X, O5 m1 E+ Y( H" k
  13. </body>
    6 Z- x& y1 j2 x. `4 Y) q
  14. </html>
复制代码
例4:倒计时定时跳转
6 F  j! p2 L9 ^. g! z
  1. <html>
    ' e+ _6 Y$ i) |7 t: i
  2. <head># I! U/ v1 f0 M8 W# |* {
  3.   <base href="<%=basePath%>">6 r" Q3 N- a3 P; T* {8 C: e
  4.   <title>My JSP 'ds04.jsp' starting page</title>
    5 h$ v+ j, T' ~. ]  O* o- k
  5.   <span id="tiao">3</span>& O' |/ x. U) B  V1 @" Y
  6.   <a href="javascript:countDown"> </a>秒后自动跳转……
    7 }2 e6 @& g- }. A) V* G' x
  7.   <meta http-equiv=refresh content=3;url= '/ds02.jsp'/>% H* p0 a% v: B) C
  8.   <!--脚本开始-->, R" M) d9 d+ H2 N. V1 A4 l& A# H
  9.   <script language="javascript" type="">( b3 I- n  ]& E
  10. function countDown(secs){: D& d5 Q# i+ P/ {
  11. tiao.innerText=secs;
      o" Q6 i4 z, ]( B* b5 F
  12. if(--secs>0)
    * t6 a& K3 W6 X3 Z3 s3 y4 }
  13.   setTimeout("countDown("+secs+")",1000);) Y& G. e$ m8 U/ J. I" I( k- G
  14. }; ]- V" A5 k; D4 i' U" G& A
  15. countDown(3);
    # s4 e' y) w4 r$ Y2 V1 r+ M' `
  16. </script>
    * s' T! n! u# j1 H0 r
  17.   <!--脚本结束-->$ x) E/ H8 K- P* R
  18. </head>
复制代码
例6:
& R+ X# l' ?8 {) ^
  1. <head> 3 G' V5 t4 K1 Y" e1 m
  2.     <meta http-equiv="refresh" content="2;url='b.html'">
    ' l/ ^- J; Y2 {* b& K# R# S
  3. </head>
复制代码
例7:% B- j7 V; n2 D% O! U
  1. <script language="javascript" type="text/javascript">
    5 N, _7 _7 }/ |6 g
  2. setTimeout("window.location.href='b.html'", 2000);
      _6 @! I% T& K/ b6 r' c5 h! d% Q
  3. //下面两个都可以用
    ; w1 |7 ]% _5 h+ P
  4. //setTimeout("javascript:location.href='b.html'", 2000);3 N) q1 V0 y/ [* K
  5. //setTimeout("window.location='b.html'", 2000);  ~# m" V/ a8 T
  6. </script>
复制代码
例8:
* N4 t( t8 S. N% L7 J
  1. <span id="totalSecond">2</span>
    7 w: R/ y: o2 ^" O: z1 {
  2. <script language="javascript" type="text/javascript">' p- G7 M: `9 P, x2 f
  3. var second = document.getElementByIdx_x('totalSecond').innerHTML;* o0 w1 ?! p- k2 h6 ?; q
  4. if(isNaN(second)){
    # K6 `1 b  w& p. I8 i: T
  5.   //……不是数字的处理方法! `8 R2 R2 c/ _1 d7 v, Y7 o
  6. }else{
    # Z5 l0 k- B3 r7 @) [- I
  7.   setInterval(function(){
    # D+ P! {- }1 @' O( |, C" ?' I5 a
  8.    document.getElementByIdx_x('totalSecond').innerHTML = --second;
    ' Z- S, {* v0 Y  l! z
  9.    if (second <= 0) {
    ( d& o, S. [" R% k
  10.     window.location = 'b.html';1 L! T5 L  j1 A9 g
  11.    }
    / t% v# c9 [. a/ u, E
  12.   }, 1000);& V+ P" v9 B6 p# m6 T
  13. }
    ; V7 K2 {& W9 r& U! r
  14. </script>
复制代码
8 l( E- F" d2 |3 i5 b$ `! N7 a

( \7 Q) f1 V. i2 p; a
! {: T% r; v/ y" g. K& O* \
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-3-16 20:22 , Processed in 0.057716 second(s), 20 queries .

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