JS学习笔记五: Js中的定时器操作
定时器
- js中定时器用于定时清理或者定时请求用的。分为间隔性定时器和延时性定时器。
间隔型定时器：就是每隔一段时间就会执行一下。
延时型定时器：就是让一个方法等待一段时间才开始执行，但是只会执行一次。
- 定时器函数
1、间隔型定时器
setInterval(fun,time)
fun():是执行的函数，time为间隔执行的时间，单位为毫秒，每过time时间就执行一次fun里面的代码。
2、延时型定时器
setTimeout(fun,time)
fun为执行函数
time为延时执行的时间，单位为毫秒，经过time时间后执行fun代码，只执行一次。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
setTimeout(function(){
alert("我是延时三秒执行的函数")
},3000)
setInterval(function(){
alert("我是间隔三秒执行的函数")
},3000)
</script>
</body>
</html>
定时器的清除
- 为什么要清除定时器
可能会遇到这种业务：需要定时器不断的请求，当遇到某个值时就停止请求，也就是停止定时器操作。
- 清除间隔型定时器
clearInterval()
- 清除延时型定时器
clearTimeout()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
//清除定时器
//创建间隔型定时器
var timer1=setInterval(function(){
console.log("我是间隔型定时器")
//clearTimeout(timer2)
},3000)
//创建延时型定时器
var timer2=setTimeout(function(){
console.log("我是延时型定时器")
clearInterval(timer1)
},4000)
</script>
</body>
</html>
定时器延时实例
- 当我们的鼠标移入小div的时候，会有一个弹窗大div显示在隔壁，鼠标离开两个div的时候弹窗div延时消失。
逻辑：
1、当鼠标移入div1时，显示div2事件。
2、当鼠标移出div1时，div2需要延时退出。
3、当鼠标离开div1在div2延时t退出时间内进入div2时，此时需要清除延时定时器，否则鼠标落在div2仍然会退出。
4、当鼠标离开div2,后div2延时退出。
5、当鼠标离开div2,又跑到div1时，需要将div2上的延时定时器清除。这样落在div1仍然会显示div2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#div1{
float: left;
width: 50px;
height: 50px;
background: red;
}
#div2{
float: left;
width: 200px;
height: 200px;
background: black;
display:none;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<script type="text/javascript">
window.onload=function(){
var oDiv1=document.getElementById('div1')
var oDiv2=document.getElementById('div2')
var timer=null
//给div1添加鼠标移入事件2
oDiv1.onmouseover=function(){
//改变oDiv2的display
clearTimeout(timer)
oDiv2.style.display='block'
}
oDiv1.onmouseout=function(){
timer=setTimeout(function(){
oDiv2.style.display='none'
},500)
}
oDiv2.onmouseover=function(){
//改变oDiv2的display
oDiv2.style.display='block'
clearTimeout(timer)
}
oDiv2.onmouseout=function(){
timer=setTimeout(function(){
oDiv2.style.display='none'
},500)
}
}
</script>
</body>
</html>
可以简化js的代码
oDiv2.onmouseover=oDiv1.onmouseover=function(){
//改变oDiv2的display
clearTimeout(timer)
oDiv2.style.display='block'
}
oDiv2.onmouseout=oDiv1.onmouseout=function(){
timer=setTimeout(function(){
oDiv2.style.display='none'
},500)
}
利用间隔性定时器制作无缝滚动图片
- 步骤
1、获取banner
2、获取ul无序列表
3、获取每个列表集合，并定义定时器
4、通过li标签获取ul的宽度。
5、通过间隔型定时器，让 ul一直往左走。
6、为了实现轮播，当第一次轮播完后再拼接一份ul
7、当第一次ul轮播完后让left值变为0，实现多次轮播
8、添加鼠标移动上去停止操作，无鼠标覆盖，继续操作。
9、精简代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0;padding: 0;}
#banner{
position: relative;
width: 600px;
height: 150px;
margin:100px auto;
overflow: hidden;
}
#banner ul{
position: absolute;
left: 0;
top:0;
}
#banner li{
float: left;
width: 200px;
height: 150px;
list-style: none;
}
#banner li img{
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<div id="banner">
<ul>
<li><img src="img/1.png"></li>
<li><img src="img/2.png"></li>
<li><img src="img/3.png"></li>
<li><img src="img/4.png"></li>
<li><img src="img/5.png"></li>
<li><img src="img/6.png"></li>
</ul>
</div>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('banner')
var oUl=oDiv.getElementsByTagName('ul')[0]
var oLi=oUl.getElementsByTagName('li')
var timer=null
//拼接多一份ul里面的内容 这两种写法相等
// oUl.innerHTML=oUl.innerHTML+oUl.innerHTML
oUl.innerHTML+=oUl.innerHTML
//计算ul的宽度
oUl.style.width=oLi[0].offsetWidth*oLi.length+'px'
function moving(){
//当left小于一半时，就设置为0重复滚动事件。
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left='0'
}
//滚动速度为2px，其中offsetLeft为当前left的值，
oUl.style.left=oUl.offsetLeft-2+'px'
}
timer=setInterval(moving,30)
oDiv.onmouseover=function(){
clearInterval(timer)
}
oDiv.onmouseout=function(){
//当鼠标离开30ms时就-2，就开始转动
timer=setInterval(moving,30)
}
}
</script>
</body>
</html>
