Javascript定时器setTimeout(),setInterval()

js定时器

定时器在页面中比较常用，特别是显示日期，自动轮播方面。

setTimeout()

setTimeout()有两个参数，第一个参数为执行的函数，第二个参数为时间间隔（单位毫秒），如下代码：1000毫秒后，执行一次函数后销毁。

setTimeout(function () {
    console.log(1)
},1000)

setInterval()

setInterval()有两个参数，第一个参数为执行的函数，第二个参数为时间间隔（单位毫秒），如下代码：每隔1000毫秒，执行一次函数，num自增1。

var num = 0;
setInterval(function () {
    num++;
    console.log(num)
},1000);

setInterval()在没有清除定时器时会一直执行，因此，很多情况下都需要清除定时器。

var timer = null;
var num = 0;
timer = setInterval(function () {
    num++;
    console.log(num);
    if(num == 4){
        clearInterval(timer)  //当num=4时清除定时器
    }
},1000);
//clearInterval(timer)    //执行1次后清除定时器

其他用法

setTimeout()也可以做成clearInterval()一样的效果，如果需要清除定时器，可以在第五行设置条件。

var num = 0;
function log() {
    num++;
    console.log(num);
    setTimeout(log,1000)
}
setTimeout(log,1000)

传参

在使用定时器时，有时会用到执行函数传参，可以考虑用函数的bind()来解决。bind的第一个参数是this指向，如果在你的执行函数中有使用this时一定要注意，你传入的this是否正确。后面的参数为log（执行的函数）的参数。

function log(msg) {
    console.log(msg);
}
setTimeout(log.bind(this,'这是一段消息'),1000)；
setInterval(log.bind(this,'重复输出这段消息'),1000)

setInterval()传参时遇到的问题

在使用一个定时器每隔1s自增num，另一个定时器每隔1s传入num执行打印，但打印出来的参数始终为0。

var num = 0;
function log(i) {
    console.log(i)
}
function count(){
    num++
}
setInterval(count,1000);						//每隔1s，num自增1
setInterval(log.bind(this,num),1000);	//每隔1s，执行log打印传入的参数

解决方法：setInterval(log.bind(this,num),1000);这句中的num一直没有变，考虑使用setTimeout()回调来解决。代码如下：

var num = 0;
function log(i) {
    console.log(i);
    setTimeout(log.bind(this,num),1000);
}
function count(){
    num++
}
setInterval(count,1000);
setTimeout(log.bind(this,num),1000);