关于setInterval()的一个问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于setInterval()的一个问题相关的知识,希望对你有一定的参考价值。

var t = null;
setInterval(move(),1000)
function move()
alert(1)

写的这个函数为什么只能调用一次。
var t = null;
setInterval(move,1000)
function move()
alert(1)

或者
var t = null;
setInterval(“move()”,1000)
function move()
alert(1)

这样写就能一直调用。求大神指导这是怎么回事?本人新人小白...

setInterval要求第一个参数必须是含javascript命令的字符串或函数对象,所以

setInterval("move()",1000)

以及
setInterval(move,1000)

这两个都是正确的。

setInterval(move(),1000)

当Javascript运行到这个语句时,会立即执行move这个函数,然后把函数的返回值作为setInterval的第一个参数,而由于move函数没有返回值,实际就相当于
setInterval(null, 1000)
这个当然就不会运行啦,表面看起来就是move只运行了一次。

move()和move是不相同的,move()是语句,表示要立即执行这个函数的意思;move则是一个函数对象,代表了这个函数本身,本身是不会运行的,可以把它赋值给其他对象或作为其他函数的参数。
参考技术A var num=0; //初始量 var a1=document.getElementById("dot"); //获得盒子 function one(); //执行的函数 alert("num:"+num); num++; var s1=-1;//初始化变量 function circleOne() s1=setInterval(one,3000); circleOne(); //循环开始 a1.onmouseover=function() //鼠标放到盒子上停止函数 clearInterval(s1); a1.onmouseout=function() //鼠标移出去接着执行函数 if(s1==-1) circleOne();

关于setInterval和setTImeout中的this指向问题

出处:http://www.cnblogs.com/zsqos/p/6188835.html

前些天在练习写一个小例子的时候用到了定时器,发现在setInterval和setTimeout中传入函数时,函数中的this会指向window对象,如下例:

复制代码
var num = 0;
function Obj (){
    this.num = 1,
    this.getNum = function(){
        console.log(this.num);
    },
    this.getNumLater = function(){
        setTimeout(function(){
            console.log(this.num);
        }, 1000)
    }
}
var obj = new Obj; 
obj.getNum();//1  打印的为obj.num,值为1
obj.getNumLater()//0  打印的为window.num,值为0
复制代码

从上述例子中可以看到setTimeout中函数内的this是指向了window对象,这是由于setTimeout()调用的代码运行在与所在函数完全分离的执行环境上. 这会导致这些代码中包含的 this 关键字会指向 window (或全局)对象。详细可参考MDN setTimeout

但是在setTimeout中传入的不是函数时,this则指向当前对象,如下例:

复制代码
var num = 0;
function Obj (){
    this.num = 1,
    this.getNum = function(){
        console.log(this.num);
    },
    this.getNumLater = function(){
        setTimeout(console.log(this.num), 1000)
    }
}
var obj = new Obj; 
obj.getNum();//1  打印的为obj.num,值为1
obj.getNumLater()//1  打印的为obj.num,值为1
复制代码

从以上两个例子可以看出,当在setTimeout中传入的参数为函数时,函数内部的this才会指向window对象。

当在setTimeout中传入了一个函数,若想要让this指向正确的值,可以使用以下两种比较常用的方法来使this指向正确的值:

1.将当前对象的this存为一个变量,定时器内的函数利用闭包来访问这个变量,如下:

复制代码
var num = 0;
function Obj (){
    var that = this;    //将this存为一个变量,此时的this指向obj
    this.num = 1,
    this.getNum = function(){
        console.log(this.num);
    },
    this.getNumLater = function(){
        setTimeout(function(){
            console.log(that.num);    //利用闭包访问that,that是一个指向obj的指针
        }, 1000)
    }
}
var obj = new Obj; 
obj.getNum();//1  打印的为obj.num,值为1
obj.getNumLater()//1  打印的为obj.num,值为1
复制代码

 

这种方法是将当前对象的引用放在一个变量里,定时器内部的函数来访问到这个变量,自然就可以得到当前的对象。

2.利用bind()方法

复制代码
var num = 0;
function Obj (){
    this.num = 1,
    this.getNum = function(){
        console.log(this.num);
    },
    this.getNumLater = function(){
        setTimeout(function(){
            console.log(this.num);
        }.bind(this), 1000)    //利用bind()将this绑定到这个函数上
    }
}
var obj = new Obj; 
obj.getNum();//1  打印的为obj.num,值为1
obj.getNumLater()//1  打印的为obj.num,值为1
复制代码

 

bind()方法是在Function.prototype上的一个方法,当被绑定函数执行时,bind方法会创建一个新函数,并将第一个参数作为新函数运行时的this。在这个例子中,在调用setTimeout中的函数时,bind方法创建了一个新的函数,并将this传进新的函数,执行的结果也就是正确的了。关于bind方法可参考 MDN bind

以上两种方法都是比较常用的,当然如果使用call或apply方法来代替bind方法,得到的结果也是正确的,但是call方法会在调用之后立即执行,那样也就没有了延时的效果,定时器也就没有用了,所以推荐使用上述两种方法来将this传进setTimeout和setInterval中。 

以上是关于关于setInterval()的一个问题的主要内容,如果未能解决你的问题,请参考以下文章

setTimeout代替setInterval的写法以及setInterval的弊端以及越来越快的解决办法

HTML DOM setInterval()和clearInterval() 方法

HTML DOM setInterval()和clearInterval() 方法

javascript定时器详解

javascript线程解释(setTimeout,setInterval你不知道的事)

关于setInterval()的一个问题