TypeScript setInterval详解

setInterval简介

setInterval是一个JavaScript和TypeScript中常用的定时器函数，用于在指定的时间间隔内重复执行一个函数或代码块，它的基本语法如下：

let intervalID: number = setInterval(callback, delay, ...args);

参数说明：

callback：要执行的函数或代码块。

delay：执行回调函数之间的时间间隔，以毫秒为单位。

…args：传递给回调函数的参数列表。

setInterval的应用场景

1、动画效果：通过定时器不断地更新元素的位置或样式，实现动画效果。

2、轮询数据：定期向服务器发送请求，获取最新的数据。

3、倒计时：设置一个倒计时，每隔一段时间更新剩余时间。

setInterval的使用示例

1、实现一个简单的动画效果：

// 获取需要移动的元素
const element = document.getElementById("myElement");
// 定义移动函数
function move() {
  element.style.left = (element.offsetLeft + 10) + "px";
}
// 设置定时器，每隔100ms执行一次move函数
let intervalID = setInterval(move, 100);

2、实现一个简单的倒计时功能：

// 设置倒计时总时长（单位：秒）
const totalSeconds = 10;
// 定义更新时间的函数
function updateTime() {
  const remainingSeconds = totalSeconds Math.floor(totalSeconds / 60) * 60; // 计算剩余的分钟和秒数
  const minutes = Math.floor(remainingSeconds / 60); // 计算剩余的分钟数
  const seconds = remainingSeconds % 60; // 计算剩余的秒数
  console.log(剩余时间：${minutes}分${seconds}秒);
}
// 设置定时器，每隔1秒执行一次updateTime函数
let intervalID = setInterval(updateTime, 1000);

setInterval的注意事项

1、如果需要在某个时刻停止定时器，可以使用clearInterval函数：clearInterval(intervalID);。

2、setInterval返回一个唯一的定时器ID，可以将其存储起来以便后续使用。