当前位置:首页 > JavaScript

js实现setinterval

2026-04-05 16:40:16JavaScript

使用 setInterval 实现定时任务

setInterval 是 JavaScript 中用于周期性执行代码的方法。它会在指定的时间间隔内重复调用一个函数或执行一段代码。

基本语法如下:

js实现setinterval

let intervalID = setInterval(callback, delay, [arg1, arg2, ...]);
  • callback:需要周期性执行的函数或代码块。
  • delay:每次执行之间的时间间隔(毫秒)。
  • arg1, arg2, ...:可选参数,传递给回调函数的额外参数。

停止 setInterval

使用 clearInterval 可以停止 setInterval 的执行:

js实现setinterval

clearInterval(intervalID);

示例代码

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

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

// 每隔 1000 毫秒(1 秒)执行一次 logTime
let timer = setInterval(logTime, 1000);

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

注意事项

  • setInterval 不会考虑回调函数的执行时间。如果回调函数执行时间超过 delay,可能会导致多个回调函数堆积。
  • 如果需要在回调函数执行完成后再开始下一次计时,可以使用 setTimeout 递归调用。

递归 setTimeout 替代方案

以下代码通过递归调用 setTimeout 实现类似 setInterval 的功能:

function repeatTask() {
  console.log(new Date().toLocaleTimeString());
  setTimeout(repeatTask, 1000);
}

repeatTask();

标签: jssetinterval
分享给朋友:

相关文章

js 进度条的实现

js 进度条的实现

使用 HTML 和 CSS 创建基础进度条 HTML 结构可以简单使用一个 div 元素作为容器,内部嵌套另一个 div 表示进度: <div class="progress-containe…

js 实现vue

js 实现vue

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

js jquery

js jquery

jQuery 简介 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。它兼容多种浏览器,提供易于使用的 API,使开发者能够…

js实现驼峰

js实现驼峰

实现驼峰命名的几种方法 使用正则表达式和字符串替换 通过正则表达式匹配字符串中的特定模式(如下划线或短横线),并将其后的字母转换为大写,同时移除分隔符。 function toCamelCase(s…

js实现防洪

js实现防洪

防抖(Debounce)实现 防抖的核心思想是在事件触发后延迟执行回调函数,若在延迟时间内再次触发事件,则重新计时。适用于输入框搜索、窗口调整等场景。 function debounce(f…

js实现游标

js实现游标

使用JavaScript实现游标 在JavaScript中,可以通过操作DOM元素的cursor样式属性来实现自定义游标效果。以下是几种常见的实现方法: 修改默认鼠标指针样式 通过CSS的curso…