计时事件
描述:通过使用js,可以做到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行,称为计时事件
类型:
setInterval--间隔指定的毫秒数不停地执行指定的代码(间隔调用)
setTimeout--在指定的毫秒数后执行代码(延迟调用)
注意:
(1)setInterval()和setTimeout()是HTML DOM Window对象的两个方法。
(2)window.setInterval()方法和window.setTimeout()方法可以不使用 window前缀,
直接使用函数 setInterval()和函数setTimeout()
1.间隔调用
描述:间隔调用全称为间隔调用函数,是window对象的一个方法
语法:
var timer = null;
timer = setInterval(间隔调用的函数,执行函数的间隔ms);
特征:本方法的特征是能够自动每间隔一定时间,调用一次指定函数
移除:clearInterval(定时器标识);
//添加定时器
var timer = null;
timer = setInterval(function(){
console.log('hello world');
},2000);
//移除定时器
clearInterval(timer);
注意:
(1)setInterval方法返回的是一个数组队列,创建定时器序号清除定时器的时候可以直接通过数组队列的方法
setInterval(function(){console.log('计时器1');},2000);
setInterval(function(){console.log('计时器2');},2000);
setInterval(function(){console.log('计时器3');},2000);
clearInterval(2);
(2)如果间隔调用的函数是一个带参函数,则声明部分需要采用下边的方式
function showText(tempText){
console.log(tempText);
};
var arr = [11,22,33,44,55];
var timer = null;
timer = setInterval('showText(arr)',2000);
(3)在函数内部,函数的真正调用者是window
(4)定时器在创建完毕后不会立即执行 而是等待【任务队列中任务执行完毕之后再开始执行】
var timer = null;
timer = setInterval(function(){
console.log(this); 在函数内部,函数的真正调用者是window
},2000);
2.延迟调用
描述:延时调用又叫延时调用函数是一种能够等待一定时间后再执行的函数
语法:
var timer = null;
timer = setTimeout(延迟调用的函数,延迟的时间ms);
特征:本方法的特征是能够延迟一定的时间调用函数【这里的函数只调用一次】
移除:clearTimeout(定时器标识);
注意:除了语法结构和表示的含义不同之外,其余注意事项全都和定时器完全一样
var timer = null;
timer = setTimeout(function(){
console.log('这里是延迟调用');
},2000);