定时器

定时器的常见方法

• setInterval()：循环调用。将一段代码，每隔一段时间执行一次。（循环执行）

• setTimeout()：延时调用。将一段代码，等待一段时间之后再执行。（只执行一次）

备注：在实际开发中，二者是可以根据需要，互相替代的。

setInterval() 的使用

setInterval()：循环调用。将一段代码，每隔一段时间执行一次。（循环执行）

参数：

• 参数1：回调函数，该函数会每隔一段时间被调用一次。

• 参数2：每次调用的间隔时间，单位是毫秒。

返回值：返回一个Number类型的数据。这个数字用来作为定时器的唯一标识，方便用来清除定时器。

定义定时器

方式一：匿名函数

每间隔一秒，将 数字 加1：

let num = 1;

setInterval(function () {

num ++;

console.log(num);

}, 1000);

方式二：

每间隔一秒，将 数字 加1：

setInterval(fn,1000);

function fn() {

num ++;

console.log(num);

}

清除定时器

定时器的返回值是作为这个定时器的唯一标识，可以用来清除定时器。具体方法是：假设定时器setInterval()的返回值是参数1，那么clearInterval(参数1)就可以清除定时器。

setTimeout()的道理是一样的。

代码举例：

setTimeout() 的使用

setTimeout()：延时调用。将一段代码，等待一段时间之后再执行。（只执行一次）

参数：

• 参数1：回调函数，该函数会每隔一段时间被调用一次。

• 参数2：每次调用的间隔时间，单位是毫秒。

返回值：返回一个Number类型的数据。这个数字用来作为定时器的唯一标识，方便用来清除定时器。

定义和清除定时器

代码举例：

const timer = setTimeout(function() {

console.log(1); // 3秒之后，再执行这段代码。

}, 3000);

clearTimeout(timer);

代码举例：（箭头函数写法）

setTimeout(() => {

console.log(1); // 3秒之后，再执行这段代码。

}, 3000);

setTimeout() 举例：5秒后关闭网页两侧的广告栏

假设网页两侧的广告栏为两个img标签，它们的样式为：

5秒后关闭广告栏的js代码为：