javascript的计时器简单介绍
来源：互联网 发布：2017年6月房地产数据 编辑：程序博客网 时间：2024/06/07 00:45
首先来介绍计时器setInterval（）的概念和使用方法：
1.setInterval(函数，毫秒)：计时器是一个带有时间概念的东西，表示每间隔多少毫秒的时间执行一次函数体内的代码。类似于循环结构，不过与循环结构仍然存在一些差异：当程序一旦进入循环结构，必须将循环体内的语句执行完毕出循环之后才能执行其他语句。而计时器只需要在到达某时间间隔的时候执行一次函数体内额代码即可，其他时间仍然可以执行其他语句
2.使用方法示例：
<script> var i=0; function fn(){ document.title=++i; } setInterval(fn,300);//此处只能使用函数名，不能写成函数名（），否则函数调用一次后结束，计时器不起作用</script>由上例可以看出来计时器的使用方法是：setInterval(要执行的函数，间隔时间),这也是除了函数名（），元素.事件=函数之外的第三种调用函数的方法
注：计时器的时间单位是毫秒，最小时间间隔是20及以上
3.计时器的清除：clearInterval(),括号内是想要清除掉的计时器。通常情况下，在创建计时器的时候会将计时器赋给一个变量，清除时直接清除那个变量即可，例如：
var timer = null; var i =0; function fn1(){ document.title = i; i++; if(i===10){ clearInterval(timer); } } timer = setInterval(fn1,1000);计时器练习1：设置两个按钮，一个’换背景’，一个’停’，并给body设置一个背景（如1，2，3，4放数组里），点击’换背景’时，每隔3秒变成下一张，点击’停’则不再切换
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">body{background-image:url(img/1.png);}</style></head><body><input type="button" value="换背景"/><input type="button" value="停"/><script>var aBtn = document.getElementsByTagName('input');var timer = null;aBtn[0].onclick = function(){ clearInterval(timer); timer=setInterval(fn1,1500);};var i = 1;function fn1(){ if(i>=4){ i=1; }else{ i++; } document.body.style.backgroundImage = 'url(img/' +i+ '.png)';}aBtn[1].onclick = function(){ clearInterval(timer);};</script></body>计时器练习2：用开关的方法把这个功能集中在一个按钮上面
<body><button id="btn1">更换背景</button><script> var oBtn1=document.getElementById("btn1"); var arr=['img/1.png','img/2.png','img/3.png','img/4.png']; var timer=null; var i=0; document.body.style.backgroundImage="url("+"img/1.png)"; var judge=true; oBtn1.onclick=function(){ if(judge) {timer=setInterval(fn1,1000);judge=false;} else{clearInterval(timer);judge=true;} } function fn1(){ i++; if(i==3){ i=0; } document.body.style.backgroundImage="url("+arr[i]+")" }</script></body>通过上面的两个例子对计时器的使用有了简单的了解，但是也发现了一个bug：每次点击按钮触发点击事件时都会开始一个新的定时器，背景图片更换的速度会越来越快。解决方法：为了避免用户多次连续点击造成混乱的情况，每次在点击之后先应该关闭计时器，再开启新的计时器。
接下来介绍延时计时器setTimeout()，用法和计时器基本类似，但顾名思义，延时计时器是在延迟一定的时间后才开始执行函数体内的代码。它与计时器的严格区别如下：
setTimeout()方法是在等待指定时间后执行函数, 且只执行一次传入的句柄函数
setInterval()方法是每指定间隔时间后执行一次传入的句柄函数,循环执行直至关闭窗口或clearInterval()
类似的，它也有对应的清除方法clearTimeout(timer)
直接进入延时计时器的练习环节：
练习1：打开一个网页1秒后弹出一个广告（随便一个网站截屏做背景），如果在3秒之内点击关闭按钮则消失，否则超过3秒未点击关闭按钮也默认消失。
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">body{margin:0;}#div1{position:fixed;left:50%; width:500px ;margin-left:-250px; top:50%; margin-top:-294px; display:none;}#btn1{background:#999; cursor:pointer; position:absolute; right:0; top:0;}</style></head><body> <div id="div1"> <img src="img/3.png" width="500" height="588" /> <button id="btn1">X</button> </div> <script src="myjs/myjs.js"></script> <script> setTimeout(function fn(){ getid("div1").style.display='block'; getid("btn1").onclick=function(){ getid("div1").style.display='none'; } setTimeout(function fn(){ getid("div1").style.display='none'; },3000) },1000); </script></body>
练习2：QQ显示详细内容，鼠标移入展示，移出消失，要求鼠标离开过一小段时间再消失（1.5秒），移动到展示内容上时，不消失，从展示上离开后（1.5秒）再消失
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">#div1{width:200px; height:400px; background-color:#930; float:left;}#div2{width:150px; height:200px; background-color:#060; float:left; margin-left:10px; display:none;}</style></head><body><div id="div1"></div><div id="div2"></div><script>var timer = null;function fn1(){ clearTimeout(timer); $('div2').style.display = 'block';}function fn2(){ timer=setTimeout(function(){ $('div2').style.display = 'none'; },500)}$('div1').onmouseover = fn1;$('div1').onmouseout = fn2;$('div2').onmouseover = fn1;$('div2').onmouseout = fn2;function $( v ){ if( typeof v === 'function' ){ window.onload = v; } else if ( typeof v === 'string' ) { return document.getElementById(v); } else if ( typeof v === 'object' ) { return v; }}</script></body>练习3：类似于练习2，实现这样的一个效果：鼠标在导航栏上任意指上去时，立即弹出相应的下拉菜单（要求此处切换时不能有延迟）；移出鼠标后下拉框延迟一会再消失；鼠标从导航上移到下拉菜单上时下拉菜单不消失，从下拉菜单上移出时下拉菜单延迟一会再消失；
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><link type="text/css" href="css/common.css" rel="stylesheet" /><style type="text/css">ul{width:520px; margin:0 auto;}#ul1 li{float:left;}#ul1 li a{display:block;padding:0 25px;height:36px; border-left:1px #c6d6e7 solid; border-rightt:1px #c6d6e7 solid; background:url(li.png) repeat-x; line-height:36px;}#ul1 li a:hover{color:#fff;}#ul2{width:342px;height:27px; background:url(li2.png) repeat-x; padding-top:6px; position:absolute; top:42px; left:365px; display:none;}#ul2 li,#ul3 li,#ul4 li,#ul5 li{height:12px; border-right:1px #7b5ab5 solid; float:left; padding:0 8px;}#ul3{width:342px;height:27px; background:url(li2.png) repeat-x; padding-top:6px; position:absolute; top:42px; left:280px; display:none;}#ul4{width:342px;height:27px; background:url(li2.png) repeat-x; padding-top:6px; position:absolute; top:42px; left:190px; display:none;}#ul5{width:342px;height:27px; background:url(li2.png) repeat-x; padding-top:6px; position:absolute; top:42px; left:105px; display:none;}</style></head><body> <ul id="ul1" class="clearfix"> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">作品</a></li> <li><a href="#">博客</a></li> </ul> <ul id="ul2" class="clearfix"> <li><a href="#">JS教程</a></li> <li><a href="#">弹出层效果</a></li> <li><a href="#">3D球面标签云</a></li> <li><a href="#">windows计算器</a></li> </ul> <ul id="ul3" class="clearfix"> <li><a href="#">最后的晚餐</a></li> <li><a href="#">图书管理系统</a></li> <li><a href="#">3D球面标签云</a></li> <li><a href="#">淘宝页面</a></li> </ul> <ul id="ul4" class="clearfix"> <li><a href="#">我们的历史</a></li> <li><a href="#">我们的成绩</a></li> <li><a href="#">我们的地址</a></li> <li><a href="#">联系我们</a></li> </ul> <ul id="ul5" class="clearfix"> <li><a href="#">公司简介</a></li> <li><a href="#">业务办理</a></li> <li><a href="#">价格介绍</a></li> <li><a href="#">经典案例</a></li> </ul> <script> var oUl=document.getElementById("ul1"); var aLi=oUl.getElementsByTagName("li"); var oUl2=document.getElementById("ul2"); var oUl3=document.getElementById("ul3"); var oUl4=document.getElementById("ul4"); var oUl5=document.getElementById("ul5"); var timer=null; var arr=[oUl5,oUl4,oUl3,oUl2]; var x; for(var i=0;i<aLi.length;i++){ aLi[i].index=i; aLi[i].onmouseover=function(){ clearTimeout(timer); for(var j=0;j<arr.length;j++){ if(arr[j].style.display=='block'){ arr[j].style.display='none'; } } arr[this.index].style.display="block"; } } /*for(var j=0;j<aLi.length;j++){ aLi[j].index=j; aLi[j].onmouseout=function(){ x=this.index; timer=setTimeout(fn,500) } } function fn(){ arr[x].style.display='none'; };*/ //写成下面的形式也能运行出来，照上面那样写是为了避免某种情况下的某种冲突，这个某种冲突我之前遇到过，但是现在想不起来了，先放在这吧，等有一天想起来的时候再补充 for(var j=0;j<aLi.length;j++){ aLi[j].index=j; aLi[j].onmouseout=function(){ timer=setTimeout(function(){ aLi[this.index].style.display='none'; },500) } } oUl5.onmouseover=function(){ clearTimeout(timer); oUl5.style.display="block"; } oUl5.onmouseout=function(){ timer=setTimeout(function(){ oUl5.style.display="none"; },500) } oUl4.onmouseover=function(){ clearTimeout(timer); oUl4.style.display="block"; } oUl4.onmouseout=function(){ timer=setTimeout(function(){ oUl4.style.display="none"; },500) } oUl3.onmouseover=function(){ clearTimeout(timer); oUl3.style.display="block"; } oUl3.onmouseout=function(){ timer=setTimeout(function(){ oUl3.style.display="none"; },500) } oUl2.onmouseover=function(){ clearTimeout(timer); oUl2.style.display="block"; } oUl2.onmouseout=function(){ timer=setTimeout(function(){ oUl2.style.display="none"; },500) } </script></body> 0 0
- javascript的计时器简单介绍
- K60的计时器/定时器的简单介绍
- Javascript 计时器的简单使用例子
- 用javascript制作的简单毫秒计时器
- JavaScript制作简单计时器
- 解读javascript的计时器
- JavaScript的计时器
- Javascript：计时器的使用
- Javascript 实现的计时器
- JavaScript的计时器
- 【JavaScript的计时器】
- 一个简单的计时器
- JS简单的计时器
- JS简单的计时器
- 简单的计时器
- 一个简单的计时器
- 简单计时器的制作
- 简单的计时器
- ndk开发通过address2line 定位bug
- 12. 程序扩展性
- 1.1 java 虚拟机如何启动的？启动之后都做了什么？
- MFC六大核心机制之二：运行时类型识别（RTTI）
- LeetCode 292. Nim Game
- javascript的计时器简单介绍
- 【BZOJ2959】【codevs2002】长跑，维护双联通分量
- java基础线程-wait+notify
- JS 取服务器时间
- Centos 7 docker 启动容器iptables报No chain/target/match by that name
- LeetCode 136. Single Number
- Java(Android)线程池
- 2016第二届中国网络营销行业大会通知
- Android 从源码的角度分析——为什么要用newInstance来实例化Fragment
