js 计时器的启动与停止|极客笔记

js 计时器的启动与停止

在JavaScript中，我们经常会用到计时器来执行一些定时任务，比如定时刷新页面内容、定时发送请求等。在本文中，我们将详细介绍如何启动和停止计时器，以及一些常见的使用场景。

定时器的概念

在JavaScript中，计时器主要有两种：setTimeout和setInterval。它们都可以用来执行一段代码，只不过执行的方式略有不同。

setTimeout会在指定的时间后执行一次回调函数。
setInterval会每隔一段时间执行一次回调函数。

启动计时器

使用 setTimeout

要启动一个setTimeout计时器，我们需要调用setTimeout函数，并传入一个回调函数和一个延迟时间（单位是毫秒）。下面是一个简单的示例：

function myFunction() {
  console.log('定时器已经启动！');
}

// 启动一个延时 3 秒的计时器
var timer = setTimeout(myFunction, 3000);

在上面的示例中，我们定义了一个函数myFunction，然后通过调用setTimeout函数来启动一个计时器。在3秒之后，控制台会输出定时器已经启动！。

使用 setInterval

使用setInterval启动计时器的方式和setTimeout类似，只不过setInterval会每隔一段时间执行一次回调函数。下面是一个简单的示例：

function myFunction() {
  console.log('每隔 2 秒执行一次！');
}

// 每隔 2 秒执行一次 myFunction 函数
var timer = setInterval(myFunction, 2000);

在上面的示例中，我们定义了一个函数myFunction，然后通过调用setInterval函数来启动一个计时器。每隔2秒，控制台会输出每隔 2 秒执行一次！。

停止计时器

使用 clearTimeout

要停止一个setTimeout计时器，我们可以使用clearTimeout函数，并传入之前启动计时器时返回的标识符。下面是一个简单的示例：

function myFunction() {
  console.log('定时器已经启动！');
}

// 启动一个延时 3 秒的计时器
var timer = setTimeout(myFunction, 3000);

// 在 2 秒后停止计时器
setTimeout(() => {
  clearTimeout(timer);
  console.log('定时器已经停止！');
}, 2000);

在上面的示例中，我们在启动计时器后，等待2秒后再调用clearTimeout函数来停止计时器。控制台会先输出定时器已经启动！，然后输出定时器已经停止！。

使用 clearInterval

要停止一个setInterval计时器，我们可以使用clearInterval函数，并传入之前启动计时器时返回的标识符。下面是一个简单的示例：

function myFunction() {
  console.log('每隔 2 秒执行一次！');
}

// 每隔 2 秒执行一次 myFunction 函数
var timer = setInterval(myFunction, 2000);

// 在 5 秒后停止计时器
setTimeout(() => {
  clearInterval(timer);
  console.log('定时器已经停止！');
}, 5000);

在上面的示例中，我们在启动计时器后，等待5秒后再调用clearInterval函数来停止计时器。控制台会持续输出每隔 2 秒执行一次！，直到我们停止计时器，然后输出定时器已经停止！。

使用场景

计时器在前端开发中有很多应用场景，比如：

定时刷新页面内容
定时发送请求给服务器
定时执行动画效果
定时检查页面的变化等

下面是一个简单的示例，展示了如何每隔一段时间刷新页面内容：

function refreshPage() {
  location.reload();
}

// 每隔 10 秒刷新页面
var timer = setInterval(refreshPage, 10000);

在上面的示例中，我们定义了一个函数refreshPage，然后通过setInterval每隔10秒执行一次该函数，实现了定时刷新页面的效果。

总结

本文介绍了如何在JavaScript中启动和停止计时器，以及一些常见的使用场景。通过使用setTimeout和setInterval函数，我们可以实现定时执行代码的功能，帮助我们处理一些定时任务。

js 计时器的启动与停止