window对象作为BOM中的顶层对象,而作为window对象中使用频繁的setInterval方法和setTimeout方法更显得尤为重要。
① setInterval() 方法
定义和用法
① setInterval() 方法可按指定的周期(以毫秒记)来调用函数或计算表达式。
② setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
语法
setInterval(code,millisec) ;
code (必需)。要调用的函数或要执行的代码串。// 传一个函数 或者代码串
millisec(必需)。周期性执行 code 的时间间隔,以毫秒计。 // 自定义设置的周期 (以毫秒计)
返回值
该函数有返回值,从而传递给 window.clearInterval() 从而取消对 code 的周期性执行。
setInterval()使用
function a(){
var i=0;
console.log(++i);
}
setInterval(a,3000); // 参数a 就是传递需要执行的函数 , 3000 就是自定义周期 3000毫秒执行一次
结果: 函数a会每隔三秒执行一次。
如果需要停止函数a的执行,则可以定义一个变量接收setInterval返回的值,将该值作为clearInterval()的参数执行该方法,就可以结束setInterval()的执行。
② setTimeout() 方法
定义和用法
setTimeout() 方法用于指定毫秒数后调用函数或计算表达式。
语法
setTimeout(code,millisec) ;
code (必需)。要调用的函数后要执行的 JavaScript 代码串。// 传一个函数 或者代码串
millisec (必需)。在执行代码前需等待的毫秒数 // 自定义时间 (以毫秒计)
返回值
该函数也有返回值,可以传递给 window.clearTimeout () 从而取消对 code 的执行。
setTimeout()用法
function a(){
console.log("气球爆炸");
}
var time = setTimeout(a,5000); //参数a 就是设置要执行的函数 5000自定义设置时间,
结果:函数a会在5秒后执行,导致气球爆炸。
如果想要在气球爆炸之前停止该函数,则用time接收函数的返回值作为clearTimeout()参数执行该方法,则可以阻止这悲剧的发生。
③ 两者的区别
相同点 : 两者语法一样。
不同点 : setTimeout 只执行一次 而setInterval会一直执行
setInterval被重复开启 是无法关闭
setTimeout被重复开启几次 就需要关闭与开启同样的次数
注意:setTimeout()与setInterval() 相比,编码要少一些,但做复杂控制时, setTimeout() 的返回值没有及时清除会经常造成不可预料的意外。
在使用setTimeout()或setInterval() 的时候,一定要注意的他们的返回值的问题,否则会出现各种异常。
其实采用setTimeout方法也可以实现setInterval的效果。
只需要在函数里面,递归的使用setTimeout方法即可。
// 如果要用setTimeout实现setInterval效果 则需要递归调用
(function a(){
console.log("气球爆炸");
var time = setTimeout(a,3000); //递归调用自己
})();
结果 : 每隔三秒就有一个气球会爆炸。