当前位置:首页 > JavaScript

js 实现setinterval

2026-03-14 15:22:08JavaScript

使用 setInterval 的基本语法

setInterval 是 JavaScript 中用于周期性执行代码的函数。语法如下:

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

示例代码

以下是一个简单的 setInterval 示例,每隔 1 秒打印一次当前时间:

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

const intervalId = setInterval(logTime, 1000);

停止 setInterval

使用 clearInterval 可以停止 setInterval 的执行。需要传入 setInterval 返回的 ID:

// 停止定时器
clearInterval(intervalId);

传递参数

可以通过 setInterval 的第三个参数及之后的参数向回调函数传递参数:

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

setInterval(greet, 2000, 'Alice');

使用箭头函数

箭头函数可以简化代码:

setInterval(() => {
    console.log('Tick');
}, 500);

注意事项

  • setInterval 不会考虑回调函数的执行时间。如果回调函数执行时间超过 delay,可能会导致多个回调函数堆积。
  • 避免内存泄漏,确保在不需要时调用 clearInterval 清理定时器。

替代方案

如果需要更精确的定时控制,可以使用 setTimeout 递归调用:

js 实现setinterval

function repeat() {
    console.log('Recursive timeout');
    setTimeout(repeat, 1000);
}

setTimeout(repeat, 1000);

这种方法可以确保每次回调执行完成后才开始下一次计时。

标签: jssetinterval
分享给朋友:

相关文章

js如何实现继承

js如何实现继承

原型链继承 通过将子类的原型指向父类的实例实现继承。子类实例能够访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Parent…

js实现复制到剪贴板

js实现复制到剪贴板

使用document.execCommand方法(传统方式,已废弃但部分浏览器仍支持) 该方法适用于旧版浏览器,但已被标记为废弃。执行前需确保文本已被选中: function copyToClipb…

js实现选题

js实现选题

实现选题功能的JavaScript方法 基础实现方案 使用数组存储选项,通过随机索引选取: const options = ['选项A', '选项B', '选项C', '选项D']; const r…

js实现图

js实现图

JavaScript 实现图的常用方法 在 JavaScript 中,图(Graph)可以通过多种方式实现,常见的包括邻接表(Adjacency List)和邻接矩阵(Adjacency Matrix…

js实现投球

js实现投球

实现投球动画的基本思路 使用JavaScript和CSS动画结合的方式模拟投球效果。核心是通过改变元素的位置、旋转和缩放属性,配合定时器或CSS过渡实现平滑动画。 创建基础HTML结构 <di…

js实现文字滚动

js实现文字滚动

实现文字滚动的几种方法 使用CSS动画实现滚动 通过CSS的@keyframes和transform属性可以实现平滑的文字滚动效果。 <style> .scroll-text { w…