JS中的定时器简介及应用
定时器简介
setInterval( )
定时调用
可以将一个函数，每隔一段时间执行一次
参数:
1.回调函数，该函数会每隔一段时间被调用一次
2.每次调用间隔的时间，单位是毫秒
返回值:
返回一个Number类型的数据
这个数字用来作为定时器的唯一标识
var num = 1;
set Interval( function( ){
count.innerHTML = num++;
if(num == 11){
clearInterval(timer);
}
}, 1000) ;
//console.log(timer);
clearInterval( )可以用来关闭一个定时器
方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器
定时调用
切换图片练习
window.onload = function(){
//获取img标签
var img1 = document.getElementById("img1");
//创建一个数组来保存图片的路径
var imgArr = ["img/1.jpg" ,"img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
//创建一个变量，用来保存当前图片的索引
var index = 0;
//定义一个变量， 用来保存定时器的标识
var timer;
//为btn01绑定一个单击响应函数
var btn01 = document.getElementById("btn01");
btn01. onclick = function(){
/*
目前，我们每点击一次按钮，就会开启一个定时器，
点击多次就会开启多个定时器，这就导致图片的切换速度过快，
并且我们只能关闭最后一次开启的定时器
*/
//在开启定时器之前，需要将当前元素上的其他定时器关闭
clearInterval(timer);
timer = setIoterval (function( ){
//使索引自增
index++;
//判断索引是否超过最大索引
/*if(index >= imgArr. length){
则将index设置为0
index = 0;
}*/
index %= imgArr.1ength;
//修改img1的src属性
img1.src = imgArr[index];
},1000);
};
//为btn02绑定一个单击响应函数
var btn02 = document.getElementById("btn02");
btn02.onclick = function(){
//点击按钮以后， 停止图片的自动切换，关闭定时器
/*
clearInterval( )可以接收任意参数，
如果参数是一个有效的定时器的标识，则停止对应的定时器
如果参数不是一个有效的标识，则什么也不做
*/
clearInterval (timer);
};
};
解决通过键盘移动div时卡顿的问题
window.onload = function( ){
//定义一个变量，来表示移动速度
var speed = 10;
//创建一个变量表示方向
var dir = 0;
//开启一个定时器，来控制div的移动
setInterval(function(){
/*
37左
38上
39右
40下
*/
switch(dir){
case 37:
//alert("向左"); left值减小
box1.style.left = box1.offsetLeft - speed + "px";
break;
case 39:
//alert("向右");
box1.style.left = box1.offsetLeft + speed + "px";
break;
case 38:
//alert("向上");
box1.style.top = box1.offsetTop - speed + "px";
break;
case 40:
//alert("向下");
box1.style.top = box1.offsetTop + speed + "px";
break;
};
//为document绑定一个按键按下的事件
document.onkeydown = function(event ){
event = event||window.event;
//当用户按了ctrl以后，速度加快
if( event.ctrlKey){
speed = 500;
}else{
//否则速度回到10
speed = 10;
}
//使dir等于按键的值
dir = event.keyCode;
};
//当按键松开时，div不再移动
document.onkeyup = function(){
//设置方向为0
dir = 0;
};
};
延时调用
延时调用
延时调用一个函数不马上执行，而是隔一段时间以后在执行，而且只会执行一次
延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次
延时调用和定时调用实际上是可以互相代替的，在开发中可以根据自己需要去选择
var num = 1;
//延时调用
setTimeout(function(){
console.1og(num++) ;
},3000);
//使用clearTimeout( )来关闭一个延时调用
clearTimeout(timer) ;
定时器的应用
通过按钮控制div移动
//获取btn01
var btn01 = document.getElementById("btn01");
//获取btn02
var btn02 = document.getElementById("btn02");
//定义一个变量， 用来保存定时器的标识
var timer;
/*
参数:
obj :要执行动画的对象
target :执行动画的目标位置
speed :移动的速度(正数向右移动，负数向左移动)
*/
function move(obj,target,speed){
//关闭上一个定时器
clearInterval(timer);
//获取元素目前的位置
var current = parseInt(getStyle(obj,"left"));
//判断速度的正负值
//如果从日向800移动，则speed为正
//如果从800向0移动，则speed为负
if(current > target ){
//此时速度应为负值
speed = -speed;
}
//开启一个定时器，用来执行动画效果
timer = setInterval(function( ){
//获取box1的原来的left值
var oldValue = parseInt(getSty1e(obj,"left"));
//在旧值的基础上增加
var newValue = oldValue + speed;
//判断newValue是否大于800
//从800向0移动
//向左移动时，需要判断newValue是否小于target
//向右移动时，需要判断newValue是否大于target
if((speed < 0 &&.newValue < target)||(speed > 0 && newValue > target)){
newValue = target;
}
//将新值设置给box1
obj. style.left = newValue + "px";
//当元素移动到0px时，使其停止执行动画
if( newValue == target){
//达到目标，关闭定时器
clearInterval(timer);
}
},30);
//点击按钮以后，使box1向右移动(1eft值增大)
btn01.onclick = function(){
move ( box1,800, 10);
};
//点击按钮以后，使box1向左移动(1eft值减小)
btn02.onclick = function(){
move ( box1,0, -10);
};
对于控制一个元素的不同定时器，可以使用全局对象，保证只进行一个定时器的运行。
对于控制多个元素的不同定时器，不能使用全局对象去定义定时器，否则会互相干扰，因为此时只能运行一个定时器，所以要分别对不同元素的定时器进行定义
