JS定时器重复执行|极客笔记

JS定时器重复执行

在网页开发中，经常会用到定时器来实现某个函数的重复执行。JS中的定时器可以帮助我们实现定时执行某段代码或函数的功能，常用的定时器有setTimeout和setInterval。

setTimeout

setTimeout函数是JS中的一个定时器函数，它可以在指定的时间后执行一次指定的函数。

语法

setTimeout(function, milliseconds);

其中，function是需要执行的函数，milliseconds是延迟的时间，单位为毫秒。

示例代码

function sayHello() {
  console.log("Hello, world!");
}

setTimeout(sayHello, 2000);

在这段代码中，定义了一个函数sayHello()，然后通过setTimeout函数设置在2秒后执行这个函数。运行以上代码，输出如下：

Hello, world!

setInterval

setInterval函数是JS中的另一个定时器函数，它可以每隔一定时间执行一次指定的函数。

语法

setInterval(function, milliseconds);

其中，function是需要执行的函数，milliseconds是执行间隔的时间，单位为毫秒。

示例代码

function showTime() {
  let date = new Date();
  let time = date.toLocaleTimeString();
  console.log("Current time: " + time);
}

setInterval(showTime, 1000);

在这段代码中，定义了一个函数showTime()，然后通过setInterval函数设置每隔1秒执行一次这个函数。运行以上代码，输出如下：

Current time: 20:31:45
Current time: 20:31:46
Current time: 20:31:47
Current time: 20:31:48
...

清除定时器

在使用定时器的过程中，有时候我们需要手动清除定时器。可以使用clearTimeout和clearInterval函数来清除相应的定时器。

clearTimeout

clearTimeout函数用于清除通过setTimeout设置的定时器。

语法

let timer = setTimeout(function, milliseconds);

clearTimeout(timer);

示例代码

function sayHello() {
  console.log("Hello, world!");
}

let timer = setTimeout(sayHello, 2000);

clearTimeout(timer);

在这段代码中，我们创建了一个setTimeout定时器并将其赋值给timer变量，然后在清除定时器之前就停止了定时器的执行。

clearInterval

clearInterval函数用于清除通过setInterval设置的定时器。

语法

let timer = setInterval(function, milliseconds);

clearInterval(timer);

示例代码

function showTime() {
  let date = new Date();
  let time = date.toLocaleTimeString();
  console.log("Current time: " + time);
}

let timer = setInterval(showTime, 1000);

setTimeout(function() {
  clearInterval(timer);
}, 5000);

在这段代码中，我们创建了一个setInterval定时器并将其赋值给timer变量，然后通过setTimeout函数在5秒后清除了这个定时器，从而停止定时器的执行。