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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

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

[复制链接]
跳转到指定楼层
楼主
发表于 2018-7-31 10:57:21 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
1,只执行一次的定时器 $ A" }$ I- }' `6 j4 x
  1. <script>
    ! C% r& V9 l# W& e7 z7 I
  2. //定时器 异步运行
    / i$ ^8 K/ P( X% X7 H8 x& i
  3. function hello(){ - ^- H( p9 m9 g- {" V
  4. alert("hello");
    , Z! I" _5 @- r% _  m! E# Q' G$ ^" N
  5. }
    ; G7 f* V# D' d6 D4 Y5 y
  6. //使用方法名字执行方法 ( r9 T# d7 Q/ L" o
  7. var t1 = window.setTimeout(hello,1000); # W, s# J( b! f, }2 P3 _
  8. var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 . H+ ~0 ^2 I9 Y2 ^; ]( L* \
  9. window.clearTimeout(t1);//去掉定时器 * b+ x+ _: Q, ?4 z9 V' u# q2 d
  10. </script>
复制代码
2,重复执行的定时器
7 f# U* ^! l2 L' R$ q
  1. <script> , ?2 V' s' m# ~" U( Z
  2. function hello(){
    ( {" K! k8 }' ~$ A& J
  3. alert("hello"); + |& b4 X( O& _* Y2 N
  4. }
    1 N) ^) Z/ L8 c) }: m. z
  5. //重复执行某个方法 8 d3 P# i- D: {% w) q- L, u
  6. var t1 = window.setInterval(hello,1000); 2 [( e- v8 u4 c1 ~, Z# f8 Y
  7. var t2 = window.setInterval("hello()",3000);
    8 x; j- r+ l3 i- [
  8. //去掉定时器的方法
    9 Y5 ?  M; h5 n; Y) B; S, d$ B& s
  9. window.clearInterval(t1);
    5 l* S* z+ s0 M% v; A0 Y( x; h+ U
  10. </script>
复制代码
备注: " q8 y+ W' ?0 X5 h" a, \
! s) U' l% D. p+ w0 I  |% z
如果在一个页面中有两个方法,都是在页面加载完成之后执行的,实际却未能按先后顺序执行,可以参照如下方法解决: " \: v& [# ]7 V$ Z
可以在onload方法中添加一个定时器,设置一个定时器,“延迟”一段时间之后再运行,即可认为区分页面加载运行方法的先后顺序。
7 r' q* S' I" {+ t5 R; F( ?8 n# A; x' ~

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

1.倒计定时器:timename=setTimeout("function();",delaytime);
, L  ^" O/ f$ M& M. M5 C2.循环定时器:timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作,可以是一个函数,也可以是几个函数,函数间用“;”隔开即可。比如要弹出两个警告窗口,便可将“function();”换成
- K7 _0 X2 C- n) W" H, |5 D8 v6 Q8 D“alert('第一个警告窗口!');alert('第二个警告窗口!');”;而第二个参数“delaytime”则是间隔的时间,以毫秒为单位,即填写“5000”,就表示5秒钟。4 |7 g" u$ c$ `4 P  P4 g' E
  倒计时定时器是在指定时间到达后触发事件,而循环定时器就是在间隔时间到来时反复触发事件,两者的区别在于:前者只是作用一次,而后者则不停地作用。: O( v( }% G' n
比如你打开一个页面后,想间隔几秒自动跳转到另一个页面,则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ,而如果想将某一句话设置成一个一个字的出现,
" K  g9 A" T2 s& s则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点,则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。' u/ F) j+ h$ l, f- [- ~5 h% j
比如:if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器:

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

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

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间,再进行某项操作。" D1 P. I2 m0 D
setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.
( P) Y7 m' M- d# msetInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象& ^% X1 [$ \, _
clearInterval(对象) 清除已设置的setInterval对象

略举两例。
6 J. d# d& S: U6 ~7 p" I! Z例1.表单触发或加载时,逐字输出字符串


; G1 I2 s4 L( Q& e& e) m/ @) h
  1. <html>! M3 @7 ]0 @; @0 p
  2. <head>$ n' W+ N- n  ]
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    % n; a# X( }% o: h3 a$ i$ h  M
  4. <title>无标题文档</title>/ C# [4 ]6 ]# |% A9 {% o
  5. <script language="JavaScript" type="text/javascript">
    4 Q8 W( i" U  g3 f, p+ S  i# y& O
  6. var str = "这个是测试用的范例文字";
      S* [* |, b/ M# G4 J. ]
  7. var seq = 0;
    3 }3 Q* q  _7 k& E/ `
  8. var second=1000; //间隔时间1秒钟
    8 Q0 ?) @2 O$ n/ J
  9. function scroll() {
    ; n# u9 R+ S/ R/ s- a. {- K
  10. msg = str.substring(0, seq+1);
    3 ?# D1 W  u. f% f5 [
  11. document.getElementByIdx_x_x('word').innerHTML = msg;
    ( n' |) g4 e/ i4 Z( f2 |8 g% t# b1 L+ y
  12. seq++;
    / [" Y# {2 N* q. y/ U9 ]: w
  13. if (seq >= str.length) seq = 0;
    2 Y7 L% Z6 h+ z' i# {8 _( Y
  14. }; N# S0 ?$ J# i2 j; o
  15. </script>
    9 `2 E& ^+ J$ U$ b/ M
  16. </head>
    + c* v; Z+ O8 B/ A/ Q% _$ l
  17. <body onload="setInterval('scroll()',second)">, W0 Q' b" d2 ]- u
  18. <div id="word"></div><br/><br/>1 R! L6 f0 X6 n: i$ @) w
  19. </body>
    " [0 _6 T) h! h1 r( m7 m' G5 H
  20. </html>
复制代码
例2.当焦点在输入框的时候,定时检查输入框信息,焦点不在时不执行检查动作。
' s# S- R" K; X
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">( J7 ^/ g: D0 l. H4 r* k; s
  2. <html xmlns="http://www.w3.org/1999/xhtml">
    4 T. Z% I# r' V. |, _# i
  3. <head>: S$ G- x- m4 V3 x
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    " ?: J7 t: G- Z& h6 L' [
  5. <title>无标题文档</title>  W9 z% I  w8 p5 O' a. \
  6. <script language="JavaScript" type="text/javascript">& `* B7 `/ p# P+ h
  7. var second=5000; //间隔时间5秒钟- O7 ^" I6 ]5 b0 c$ H
  8. var c=0;
    7 |, M/ g/ u/ h; h
  9. function scroll() {0 [' L' x1 h6 q6 y. N
  10. c++;) C! ]6 _/ t$ h6 l
  11. if ("b" == document.activeElement.id) {
      V7 s# h* ]3 [9 w, ~' |
  12. var str="定时检查第<b> "+c+" </b>次<br/>";
    ) i3 v+ v4 @7 |: e
  13. if(document.getElementByIdx_x_x('b').value!=""){" o7 s- p# x; v, c2 L2 k3 n! ^
  14. str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";. r( x) e# }' f; B( \2 Q: R, s9 q
  15. }
    ! x1 w% P) N: H( u
  16. document.getElementByIdx_x_x('word').innerHTML = str;/ b7 X8 s. H7 B" W# t" Q- s
  17. }
    ; ~0 p" ]. x' ^1 x
  18. }3 @6 a: y) ^$ S7 D5 l( N; i
  19. </script>1 W9 Q/ @8 N; I- Q0 {
  20. </head>
    # M+ i" \$ ?/ {, S- }2 @, K2 d
  21. <body>
    / l/ p, o; ]. Q* w, O- y
  22. <textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/># g# g" e8 j" v9 K+ w9 k
  23. <div id="word"></div><br/><br/>, h( i' ^0 Y6 W" W+ T8 C
  24. </body># r1 F" `" `0 Y4 Q$ T
  25. </html>
复制代码
例3.下面这个是最简单的例子,定时器时间到达后弹出警告窗口。
4 X" h& z& I9 w# u! t
  1. <html xmlns="http://www.w3.org/1999/xhtml">8 @9 B% M7 ^, O- [# b6 [
  2. <head>+ `0 w: d: x) p7 i- o
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    ' m* w, f/ o9 D5 D& [4 v6 {0 |( {
  4. <script language="javascript">1 q/ z" W  a$ p0 A3 z
  5. function count() {
    " \+ Z5 X% R  s. ~
  6. document.getElementByIdx_x_x('m').innerHTML="计时已经开始!";
    , Q* Y6 k: n4 C6 v2 n& \* U& D
  7. setTimeout("alert('十秒钟到!')",10000)
    * P, x1 t$ c! }& a& C" E$ @  p
  8. }7 Y( c- b4 R5 n5 L
  9. </script>
    $ G& }; z& b6 w% \
  10. <body>
    6 N; `/ b2 V/ c: R' y7 ]2 t8 O5 K
  11. <div id="m"></div>
    * y% |8 l3 r( N
  12. <input TYPE="button" value=" 计时开始" onclick="count()">' [. i  B( h) W+ n4 O
  13. </body>7 N% O. _( w; O+ z. n3 ]/ Z/ g
  14. </html>
复制代码
例4:倒计时定时跳转
8 N3 K( p8 D$ B9 w7 x
  1. <html>6 P7 M+ Q, n0 F" h; u! g
  2. <head>; d) _/ o& o* @( v' z$ z7 L
  3.   <base href="<%=basePath%>">
      l  l8 o% [: V& r8 d
  4.   <title>My JSP 'ds04.jsp' starting page</title>
    * d3 v7 u: p+ }" [
  5.   <span id="tiao">3</span>, q0 _0 b8 ~8 q9 z
  6.   <a href="javascript:countDown"> </a>秒后自动跳转……9 T% M3 P$ @7 ^, z6 {
  7.   <meta http-equiv=refresh content=3;url= '/ds02.jsp'/>0 H% G5 W5 W' Q8 J: ~& _
  8.   <!--脚本开始-->
      n9 h9 e/ K6 y9 q- q$ A! C5 k4 ]( ]/ c
  9.   <script language="javascript" type="">
    # z/ |# `7 b) I/ v2 m- Y
  10. function countDown(secs){
    ' D  j/ L- F" H5 {! Z: a
  11. tiao.innerText=secs;+ Z: ?& U3 W8 T" X3 y" P
  12. if(--secs>0)3 b7 \; W" s9 c4 s( y! {. c
  13.   setTimeout("countDown("+secs+")",1000);
    ( C* a! G# B/ T( E% y
  14. }6 f! [4 W% S* `3 _. o
  15. countDown(3);
    0 K! O7 Y9 R9 O" ~$ t. }9 c9 y$ o5 d7 t
  16. </script>
    % [& C9 L& r# _% w# N
  17.   <!--脚本结束-->
    . ?/ p% E/ j- r% B" A
  18. </head>
复制代码
例6:7 h, N5 @/ Q$ p; A
  1. <head>
    $ n' k' W# k/ X; j* l4 C! O
  2.     <meta http-equiv="refresh" content="2;url='b.html'"> + x5 o  t; a. e7 ~) D9 ]/ f
  3. </head>
复制代码
例7:6 o. F2 ~" ^7 s+ f7 b
  1. <script language="javascript" type="text/javascript">
    ; N% J& H+ o) a  K
  2. setTimeout("window.location.href='b.html'", 2000);# c% |( ?1 E% E, L# R
  3. //下面两个都可以用" p4 a& N5 m# }3 b- {) J
  4. //setTimeout("javascript:location.href='b.html'", 2000);
    $ ]- P- M  T" {5 R5 i4 O0 s
  5. //setTimeout("window.location='b.html'", 2000);1 G- P  a' p& h9 F8 w) j" V
  6. </script>
复制代码
例8:
% s1 x' ^  ^' y3 @$ R$ {1 ]
  1. <span id="totalSecond">2</span>
    6 N9 ~  E( T, T+ Q, J. b+ p
  2. <script language="javascript" type="text/javascript">6 q+ k& P: h# V1 E$ d9 J1 ^/ x
  3. var second = document.getElementByIdx_x('totalSecond').innerHTML;7 O3 J' q8 H* u7 _/ p
  4. if(isNaN(second)){
    . q. k6 C  }2 j1 h0 X  z. |1 l  M8 E
  5.   //……不是数字的处理方法. {+ o$ i/ J" M1 Y7 E  ~6 m# n
  6. }else{
    2 ]- q3 Q. Y$ F! ~5 u
  7.   setInterval(function(){
    / B1 j3 R. c* @
  8.    document.getElementByIdx_x('totalSecond').innerHTML = --second;2 `4 y% ^& r. l+ e
  9.    if (second <= 0) {
    ' E1 Q( K: L/ T% v6 B5 ]
  10.     window.location = 'b.html';( U# F5 p0 f: w/ d
  11.    }( S, z# y- R# ]0 b
  12.   }, 1000);
    + C7 f, l1 s4 b. X& a' M
  13. }
    9 I: v; A& v( r! g2 s" l* [1 \
  14. </script>
复制代码
+ b) b7 C' s7 b9 c; w
) D' G0 p" E/ G& w: Z

0 o" `1 D1 D' @$ D/ c
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-1-30 16:32 , Processed in 0.054177 second(s), 20 queries .

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