首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js定时器的使用(实例讲解)

Posted in Javascript onJanuary 06, 2014

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

1.倒计定时器：timename=setTimeout("function();",delaytime);
2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成
“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。

倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。
比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，
则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。
比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

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

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

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

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.
setInterval("function",time) 设置一个超时对象

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

clearTimeout(对象) 清除已设置的setTimeout对象
clearInterval(对象) 清除已设置的setInterval对象

略举两例。
例1.表单触发或加载时，逐字输出字符串

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="JavaScript" type="text/javascript">
var str = "这个是测试用的范例文字";
var seq = 0;
var second=1000; //间隔时间1秒钟
function scroll() {
msg = str.substring(0, seq+1);
document.getElementByIdx_x_x('word').innerHTML = msg;
seq++;
if (seq >= str.length) seq = 0;
}
</script>
</head>
<body onload="setInterval('scroll()',second)">
<div id="word"></div><br/><br/>
</body>
</html>

 

例2.当焦点在输入框的时候，定时检查输入框信息，焦点不在时不执行检查动作。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="JavaScript" type="text/javascript">
var second=5000; //间隔时间5秒钟
var c=0;
function scroll() {
c++;
if ("b" == document.activeElement.id) {
var str="定时检查第<b> "+c+" </b>次<br/>";
if(document.getElementByIdx_x_x('b').value!=""){
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
}
document.getElementByIdx_x_x('word').innerHTML = str;
}
}
</script>
</head>
<body>
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
<div id="word"></div><br/><br/>
</body>
</html>

例3.下面这个是最简单的例子，定时器时间到达后弹出警告窗口。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script language="javascript">
function count() {
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";
setTimeout("alert('十秒钟到！')",10000)
}
</script>
<body>
<div id="m"></div>
<input TYPE="button" value=" 计时开始" onclick="count()">
</body>
</html>

例4:倒计时定时跳转

<html>
<head>
  <base href="<%=basePath%>">
  <title>My JSP 'ds04.jsp' starting page</title>
  <span id="tiao">3</span>
  <a href="javascript:countDown"> </a>秒后自动跳转……
  <meta http-equiv=refresh content=3;url= '/ds02.jsp'/>
  <!--脚本开始-->
  <script language="javascript" type="">
function countDown(secs){
 tiao.innerText=secs;
 if(--secs>0)
  setTimeout("countDown("+secs+")",1000);
 }
 countDown(3);
 </script>
  <!--脚本结束-->
 </head>

例6: 

<head> 
    <meta http-equiv="refresh" content="2;url='b.html'"> 
</head>

例7:

<script language="javascript" type="text/javascript">
 setTimeout("window.location.href='b.html'", 2000);
 //下面两个都可以用
 //setTimeout("javascript:location.href='b.html'", 2000);
 //setTimeout("window.location='b.html'", 2000);
</script>

例8:

<span id="totalSecond">2</span>
<script language="javascript" type="text/javascript">
 var second = document.getElementByIdx_x('totalSecond').innerHTML;
 if(isNaN(second)){
  //……不是数字的处理方法
 }else{
  setInterval(function(){
   document.getElementByIdx_x('totalSecond').innerHTML = --second;
   if (second <= 0) {
    window.location = 'b.html';
   }
  }, 1000);
 } 
</script>

js定时器(执行一次、重复执行)

分享一段js代码，有关js定时器的小例子，分为执行一次的定时器与重复执行的定时器。供初学的朋友参考。

1，只执行一次的定时器

<script>  
//定时器 异步运行  
function hello(){  
    alert("hello");  
}  
//使用方法名字执行方法  
var t1 = window.setTimeout(hello,1000);  
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法  
window.clearTimeout(t1);//去掉定时器  
</script>

2，重复执行的定时器

<script>  
function hello(){  
    alert("hello");  
}  
//重复执行某个方法  
var t1 = window.setInterval(hello,1000);  
var t2 = window.setInterval("hello()",3000);  
//去掉定时器的方法  
window.clearInterval(t1);  
</script>

备注：

如果在一个页面中有两个方法，都是在页面加载完成之后执行的，实际却未能按先后顺序执行，可以参照如下方法解决：
可以在onload方法中添加一个定时器，设置一个定时器，“延迟”一段时间之后再运行，即可认为区分页面加载运行方法的先后顺序。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <script language="javascript" type="text/javascript">
    var YC = new Object();
    function beginYC()
    {
        var secondsYC = document.getElementById("txtYCSeconds").value;
        try
        { 
            YC = setTimeout("alert('延迟"+secondsYC+"秒成功')",secondsYC*1000);
        }
        catch(e)
        {
            alert("请输入正确的秒数。");
        }
    }
    function overYC()
    {
        clearTimeout(YC);
        YC=null;
        alert("终止延迟成功。");
    }
/**************************↓↓↓↓定时器的使用↓↓↓↓********************************/
    var timerDS = new Object();
    var timerDDS = new Object();
    function beginDS()
    {
        sn.innerHTML = "0";
        timerDS = setInterval("addOne()",parseInt(document.getElementById("txtIntervalSeconds").value,10)*1000);
    }
    function goonDS()
    {
        timerDS = setInterval("addOne()",parseInt(document.getElementById("txtIntervalSeconds").value,10)*1000);
    }
    function overDS()
    {
        clearInterval(timerDS);
        timerDS=null;
    }
    function delayDS()
    {
        overDS();
        timerDDS = setTimeout("goonDS()",document.getElementById("txtDDSSeconds").value*1000);
    }
    function addOne()
    {
        if(sn.innerHTML=="10")
        {
            overDS();
            alert("恭喜你，已成功达到10秒");
            return;
        }
        sn.innerHTML=parseInt(sn.innerHTML,10)+1;
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        延迟器的使用：</div>
    <div>
     <label id="Label2" title="延迟秒数："></label>
        <input type="text" id="txtYCSeconds" value="3" />
        <input type="button" id="btnBYC" onclick="javascript:beginYC()" value="开始延迟" />
        <input type="button" id="btnOYC" onclick="javascript:overYC()" value="终止延迟" />
        <input type="button" id="Button1" onclick="javascript:alert('good monrning');" value="普通弹窗" />
    </div>
    <br />
    <div>
        定时器的使用：</div>
    <div>
    <div id="sn">0</div>
    <label id="Label1" title="定时间隔秒数："></label>
        <input type="text" id="txtIntervalSeconds" value="1" />
        <input type="button" id="btnBDS" onclick="javascript:beginDS()" value="启动定时" />
        <input type="button" id="btnODS" onclick="javascript:overDS()" value="终止定时" />
        <input type="button" id="btnGDS" onclick="javascript:goonDS()" value="继续定时" />
        <label id="ds" title="延迟秒数："></label>
        <input type="text" id="txtDDSSeconds" value="5" />
        <input type="button" id="btnDDS" onclick="javascript:delayDS()" value="延迟定时" />
        </div>
    </form>
</body>
</html>

js定时器的使用(实例讲解)

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
location.href用法总结(最主要的)
Dec 27 Javascript
js 立即调用的函数表达式如何写
Jan 12 Javascript
JavaScript实现简单图片滚动附源码下载
Jun 17 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
Dec 31 Javascript
jQuery实现移动端Tab选项卡效果
Mar 15 Javascript
vue.js评论发布信息可插入QQ表情功能
Aug 08 Javascript
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
详解如何使用PM2将Node.js的集群变得更加容易
Nov 15 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 Javascript
layui复选框的全选与取消实现方法
Sep 02 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
Jul 19 Javascript
JS不要再到处使用绝对等于运算符了
Apr 30 Javascript
浅析js中的浮点型运算问题
Jan 06 #Javascript
js中浮点型运算BUG的解决方法说明
Jan 06 #Javascript
Jquery操作radio的简单实例
Jan 06 #Javascript
jQuery选择器全面总结
Jan 06 #Javascript
JavaScript定义类的几种方式总结
Jan 06 #Javascript
javascript函数定义的几种区别小结
Jan 06 #Javascript
javascript 用函数语句和表达式定义函数的区别详解
Jan 06 #Javascript
日志格式分析(1) Windows server 2012(17) create(1) mounted(1) Rewrite(4)  AD域(1) destoon(1) 组策略(1) nginx(76) 子查询(1)
You might like
法兰绒滤网冲泡
2021/03/03 冲泡冲煮
PHP中动态显示签名和ip原理
2007/03/28 PHP
ioncube_loader_win_5.2.dll的错误解决方法
2015/01/04 PHP
Yii2框架dropDownList下拉菜单用法实例分析
2016/07/18 PHP
老生常谈PHP位运算的用途
2017/03/12 PHP
JavaScript与函数式编程解释
2007/04/27 Javascript
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
JavaScript设计模式之代理模式介绍
2014/12/28 Javascript
js的回调函数详解
2015/01/05 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
2016/01/19 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
在vue.js中抽出公共代码的方法示例
2017/06/08 Javascript
js实现动态改变radio状态的方法
2018/02/28 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
2019/07/26 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
vuex刷新后数据丢失的解决方法
2020/10/18 Javascript
Python的Bottle框架中获取制定cookie的教程
2015/04/24 Python
Python实现控制台中的进度条功能代码
2017/12/22 Python
python 显示数组全部元素的方法
2018/04/19 Python
Python+threading模块对单个接口进行并发测试
2019/06/25 Python
在Python中COM口的调用方法
2019/07/03 Python
python opencv对图像进行旋转且不裁剪图片的实现方法
2019/07/09 Python
Python的几种主动结束程序方式
2019/11/22 Python
Python使用psutil获取进程信息的例子
2019/12/17 Python
6行Python代码实现进度条效果（Progress、tqdm、alive-progress​​​​​​​和PySimpleGUI库）
2020/01/06 Python
python批量修改xml属性的实现方式
2020/03/05 Python
html5 button autofocus 属性介绍及应用
2013/01/04 HTML / CSS
运动鞋中的劳斯莱斯：索康尼(SAUCONY)
2017/08/09 全球购物
结构工程个人自荐信范文
2013/11/30 职场文书
法人授权委托书范本
2014/04/04 职场文书
工作建议书范文
2014/05/13 职场文书
给老师的一封感谢信
2015/01/20 职场文书
个人培训总结
2015/03/05 职场文书
子女赡养老人协议书
2016/03/23 职场文书