YiDaoJ's Blog

JavaScript中使用setInterval()时调用其他函数的写法小结

Posted on | In |

setInterval()可以使指定任务在每间隔的指定时间后重复执行。

其语法如下：

1
2
setInterval(code, interval);
setInterval(func, interval);
  • code参数是想要反复执行的代码，但必须以字符串形式出现；
  • func参数是想要反复调用的函数；
  • interval是间隔时间，此处的单位为毫秒。

实际上，第一种语法中以字符串形式的代码作为参数是不推荐的，原因同eval()。

问题来了，使用第二种语法时，所调用的函数是否有参数、函数作用域不同，调用这些函数的写法也有不同。

1. 调用作用域为全局且无参的函数

1
2
3
4
5
6
function showTime() {
  var now = new Date();
  console.log(now.toLocaleString());
}
setInterval(showTime, 1000);

执行上面的代码，每隔一秒钟会在浏览器的控制台显示当前的日期和时间。setInterval()调用无参函数时，直接在指定位置写函数名即可，不要在函数名后加括号()。 ​

2. 调用作用域为全局但含参的函数

1
2
3
4
5
var a = 10;
function increment(b) {			
  console.log(a += b);			
}
setInterval(function(){increment(5);}, 1000);

上面代码的功能是每隔一秒在控制台输出参数a每秒递增b的结果。此时函数increment(b)虽然作用域为全局，但如果在satInterval()调用时写成setInterval(increment(5), 1000);，那么结果只会在控制台显示一次，也就是说函数increment(b)只执行了一次，没有反复执行。
所以，如果想在setInterval()中调用含参函数，就要把调用的函数写在匿名函数function(){}中。

3. 调用局部作用域的函数

1
2
3
4
5
6
7
8
9
var Car = function(){
  this.rentPrice = 10;
  this.calculate = function(){
    console.log(this.rentPrice += 6);
  };
};
var car1 = new Car();
setInterval(function(){car1.calculate();}, 1000);

例如在租车时，价格会随着用的时间而增多，例子不是很恰当，理解用意即可。
在setInterval()中调用Car中的函数时calculate()，也要使用function(){实例对象.函数名()}的写法；不可直接调用实例对象的内部函数，否则该函数只会执行一次。

欢迎交流。

注：此文章为本人原创，转载时烦请必注明出处。