当前位置:首页 > JavaScript

js 实现setinterval

2026-03-14 15:22:08JavaScript

使用 setInterval 的基本语法

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

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

示例代码

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

js 实现setinterval

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

const intervalId = setInterval(logTime, 1000);

停止 setInterval

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

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

传递参数

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

js 实现setinterval

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

setInterval(greet, 2000, 'Alice');

使用箭头函数

箭头函数可以简化代码:

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

注意事项

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

替代方案

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

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

setTimeout(repeat, 1000);

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

标签: jssetinterval
分享给朋友:

相关文章

js实现乘

js实现乘

JavaScript 实现乘法运算 在 JavaScript 中实现乘法运算可以通过多种方式完成,包括基本运算符、函数封装以及高级算法(如大数乘法)。以下是几种常见方法: 使用基本乘法运算符 Jav…

js轮播图实现原理

js轮播图实现原理

轮播图的基本原理 轮播图通过动态切换显示的内容(图片、文本等)实现视觉上的滑动效果。核心原理是利用CSS和JavaScript控制元素的显示与隐藏,或通过变换位置实现滑动动画。 实现方法一:…

js实现dh

js实现dh

JavaScript 实现 DH(Diffie-Hellman)密钥交换 Diffie-Hellman(DH)密钥交换是一种安全协议,允许双方在不安全的通信信道上建立一个共享密钥。以下是如何在 Jav…

js类实现

js类实现

使用类实现 JavaScript 功能 在 JavaScript 中,类(Class)是一种语法糖,基于原型继承机制。通过 class 关键字可以更直观地定义对象模板。 基本类定义 class…

js实现交换

js实现交换

交换变量的方法 在JavaScript中,交换两个变量的值有多种方法。以下是常见的几种实现方式: 使用临时变量 通过引入一个临时变量来存储其中一个变量的值,实现交换: let a = 1; le…

js实现vue路由

js实现vue路由

Vue 路由的基本实现 在 Vue.js 中实现路由功能通常使用 Vue Router 库。Vue Router 是 Vue.js 官方的路由管理器,用于构建单页面应用(SPA)。 安装 Vue R…