当前位置:首页 > JavaScript

js 实现setinterval

2026-04-06 09:13:03JavaScript

使用 setInterval 的基本语法

setInterval 是 JavaScript 中的一个内置函数,用于按照指定的时间间隔重复执行代码。语法如下:

let intervalID = setInterval(callback, delay, arg1, arg2, ...);
  • callback:要重复执行的函数。
  • delay:每次执行之间的时间间隔(毫秒)。
  • arg1, arg2, ...:可选参数,传递给 callback 函数的参数。

示例代码

以下是一个简单的示例,每隔 1 秒在控制台输出一次当前时间:

function logTime() {
    console.log(new Date().toLocaleTimeString());
}

let intervalID = setInterval(logTime, 1000);

停止 setInterval

如果需要停止 setInterval 的执行,可以使用 clearInterval 函数:

clearInterval(intervalID);

传递参数

可以通过 setInterval 传递参数给回调函数:

function greet(name) {
    console.log(`Hello, ${name}!`);
}

let intervalID = setInterval(greet, 2000, 'Alice');

注意事项

  • 确保在不需要时清除 setInterval,避免内存泄漏。
  • delay 参数的最小值通常是 4 毫秒(取决于浏览器实现)。

实际应用示例

以下是一个倒计时计时器的实现:

js 实现setinterval

let count = 10;

function countdown() {
    console.log(count);
    count--;
    if (count < 0) {
        clearInterval(intervalID);
        console.log('Countdown finished!');
    }
}

let intervalID = setInterval(countdown, 1000);

替代方案

如果需要更精确的时间控制,可以考虑使用 requestAnimationFramesetTimeout 递归调用。

标签: jssetinterval
分享给朋友:

相关文章

js实现图片轮播

js实现图片轮播

实现基础图片轮播 使用HTML、CSS和JavaScript创建一个简单的图片轮播。HTML部分定义轮播容器和图片,CSS设置样式和动画效果,JavaScript处理轮播逻辑。 <div cl…

js 实现vue

js 实现vue

Vue.js 的基本实现 在 JavaScript 中实现 Vue.js 的核心功能,可以通过数据绑定、响应式系统和虚拟 DOM 来实现。以下是实现 Vue.js 核心功能的简化版本。 数据响应式系…

js实现变形

js实现变形

使用 CSS 和 JavaScript 实现元素变形 在 JavaScript 中实现变形效果通常结合 CSS 的 transform 属性,通过动态修改该属性实现元素的旋转、缩放、倾斜或平移。 基…

js实现跑马灯

js实现跑马灯

实现跑马灯效果 使用HTML和JavaScript可以轻松实现跑马灯效果。以下是两种常见的实现方式: HTML结构 <div id="marquee"> <span>…

js进度条实现

js进度条实现

使用HTML和CSS创建基础结构 在HTML中创建一个容器元素用于显示进度条,通常使用<div>元素。CSS用于设置进度条的样式,包括宽度、高度、颜色和圆角等属性。 <div cl…

js实现显示隐藏

js实现显示隐藏

显示隐藏的实现方法 在JavaScript中,实现元素的显示和隐藏可以通过多种方式完成。以下是几种常见的方法: 修改CSS的display属性 通过改变元素的display属性可以在none(隐藏)…