当前位置:首页 > JavaScript

js实现settime

2026-04-06 11:02:51JavaScript

使用 setTimeout 实现定时任务

在 JavaScript 中,setTimeout 用于在指定的延迟时间后执行一次回调函数。以下是几种常见的实现方式:

基本用法

setTimeout(() => {
  console.log('这段代码将在 1 秒后执行');
}, 1000);

传递参数给回调函数

setTimeout((param1, param2) => {
  console.log(param1, param2); // 输出: Hello World
}, 1000, 'Hello', 'World');

清除定时器

const timerId = setTimeout(() => {
  console.log('这段代码不会执行');
}, 1000);

clearTimeout(timerId);

使用 setTimeout 模拟 setInterval

可以通过递归调用 setTimeout 来实现类似 setInterval 的重复执行效果:

js实现settime

function repeatFunc() {
  console.log('每隔 1 秒执行一次');
  setTimeout(repeatFunc, 1000);
}

setTimeout(repeatFunc, 1000);

更精确的定时控制

对于需要更精确的定时控制,可以记录开始时间并计算剩余延迟:

function preciseTimeout(callback, delay) {
  const start = Date.now();

  function loop() {
    const elapsed = Date.now() - start;
    if (elapsed >= delay) {
      callback();
    } else {
      setTimeout(loop, delay - elapsed);
    }
  }

  setTimeout(loop, 0);
}

处理异步任务

当需要在定时器中执行异步操作时,应使用 Promise 或 async/await:

setTimeout(async () => {
  const data = await fetchData();
  console.log(data);
}, 1000);

性能优化技巧

对于频繁调用的定时器,可以考虑使用 requestAnimationFrame 替代:

js实现settime

function animationTimeout(callback, delay) {
  const start = performance.now();

  function frame(time) {
    if (time - start >= delay) {
      callback();
    } else {
      requestAnimationFrame(frame);
    }
  }

  requestAnimationFrame(frame);
}

浏览器与 Node.js 差异

在 Node.js 环境中,setTimeout 返回的是 Timeout 对象而非数字 ID:

// Node.js 环境
const timer = setTimeout(() => {}, 1000);
timer.unref(); // 允许事件循环在定时器完成前退出

注意事项

定时器的最小延迟时间在不同环境下有差异,浏览器通常限制为 4ms,Node.js 则可能有更小的限制。

定时器的实际执行时间可能晚于预期,特别是在主线程被阻塞时。

多个嵌套的 setTimeout 调用会导致调用栈增长,应考虑使用尾递归优化或迭代方式。

标签: jssettime
分享给朋友:

相关文章

js实现拷贝

js实现拷贝

实现文本拷贝 使用 document.execCommand 方法(已废弃但兼容性较好): function copyText(text) { const textarea = document…

js实现祖玛

js实现祖玛

实现祖玛游戏的核心思路 祖玛游戏的核心玩法是发射彩色珠子,形成三个或以上相同颜色的珠子即可消除。以下是使用JavaScript实现的基本框架。 游戏初始化 创建画布并初始化游戏状态: const…

js实现图

js实现图

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

节流js实现

节流js实现

节流(Throttle)的实现原理 节流是一种限制函数执行频率的技术,确保函数在一定时间间隔内最多执行一次。适用于高频触发事件(如滚动、输入、窗口调整等)的场景。 基础实现方式 使用时间戳判断是否执…

js实现排序

js实现排序

数组排序方法 JavaScript提供了内置的sort()方法用于数组排序。默认情况下,sort()将元素转换为字符串并按照Unicode码点排序。对于数字排序,需传入比较函数。 const num…

js实现刷新页面

js实现刷新页面

刷新页面的方法 在JavaScript中,可以通过多种方式实现页面刷新。以下是几种常见的方法: 使用 location.reload() 调用 location.reload() 方法可以重新加载当…