你所不了解的setTimeout
关于setInterval()和setTimeout()返回值
setInterval(),setTimeout() 会返回一个值,一般认为是ID,将这个ID值传递给clearInterval(),clearTimeout() 可以取消执行,例如:
- var intervalTimer=setInterval(function(){
- console.log(1)
- },3000);
- console.log(intervalTimer); //一般是一个数字,Number
- button.onclick=function(){
- clearInterval(intervalTimer);
- };
关于setInterval()和setTimeout()中回调函数中的this
setInterval(),setTimeout() 方法是浏览器 window
对象提供,所以第一个参数函数中的this
指向window
对象,这跟变量的作用域有关:
- var a=1;
- var obj={
- a:2,
- b:function(){
- setTimeout(function(){
- console.log(this.a);//这里返回的是:1;
- },2000);
- }
- };
- obj.b();
当然你可以通过使用bind()方法来改变这个情况:
- var a=1;
- var obj={
- a:2,
- b:function(){
- setTimeout(function(){
- console.log(this.a);//这里返回的是:2;
- }.bind(this),2000);//注意这行
- }
- };
- obj.b();
关于setInterval()和setTimeout()的参数
大家都知道setInterval()和setTimeout()可以接收两个参数,第一个参数是需要回调的函数,必须传入的参数,第二个参数是时间间隔,毫秒数,可以省略,这个可以看文章的下面,
不传第二个参数,浏览器自动配置时间,在IE,FireFox中,第一次配可能给个很大的数字,100ms上下,往后会缩小到最小时间间隔,Safari,chrome,opera则多为10ms上下。
但是我要说的当然不是这个,我要说的是setInterval()和setTimeout()可以接收更多的参数,那么这些参数是干什么用的呢?从第三个参数开始,依次用来表示第一个参数(回调函数)传入的参数,例如:
- setTimeout(function(a,b){
- console.log(1+a+b);//这里打印的是:8
- },1000,3,4);
当然一些古老的浏览器是不支持的。
关于clearInterval()和clearTimeout()
clearInterval()和clearTimeout()其实是通用的,就是说你可以用 clearInterval() 取消 setTimeout() 执行,clearTimeout()同样可以取消 setInterval() 执行。
- var intervalTimer=setInterval(function(){
- console.log(1)
- },3000);
- console.log(intervalTimer);
- button.onclick=function(){
- clearTimeout(intervalTimer); //注意这里,不是clearInterval哦
- };