当前位置：首页 > JavaScript

js实现定时提醒

2026-02-02 14:51:09JavaScript

使用 setTimeout 实现单次提醒

通过 setTimeout 延迟执行回调函数，适用于单次定时提醒场景。

js实现定时提醒

function setReminder(message, delay) {
  setTimeout(() => {
    alert(message); // 或 console.log(message) 控制台输出
  }, delay * 1000); // 延迟时间（秒转毫秒）
}
// 示例：5秒后弹出提示
setReminder("该休息了！", 5);

使用 setInterval 实现周期性提醒

通过 setInterval 周期性执行任务，适合重复提醒场景。

js实现定时提醒

function setPeriodicReminder(message, interval) {
  setInterval(() => {
    alert(message); 
  }, interval * 1000); // 间隔时间（秒转毫秒）
}
// 示例：每30分钟提醒一次
setPeriodicReminder("喝水时间到！", 1800);

结合 Notification API 实现桌面通知

浏览器通知更显眼，需用户授权后使用。

function showNotification(title, options) {
  if (Notification.permission === "granted") {
    new Notification(title, options);
  } else if (Notification.permission !== "denied") {
    Notification.requestPermission().then(permission => {
      if (permission === "granted") {
        new Notification(title, options);
      }
    });
  }
}
// 示例：10秒后发送通知
setTimeout(() => {
  showNotification("提醒", { body: "会议即将开始！" });
}, 10000);

使用 localStorage 存储提醒状态

避免页面刷新后定时器失效，记录提醒状态。

function setPersistentReminder(key, message, delay) {
  const lastReminded = localStorage.getItem(key);
  if (!lastReminded || Date.now() - lastReminded > delay * 1000) {
    alert(message);
    localStorage.setItem(key, Date.now());
  }
}
// 示例：每天只提醒一次
setPersistentReminder("dailyReminder", "记得写日报！", 86400);

注意事项

定时器精度受浏览器标签页休眠影响，长时间未激活可能延迟。
清除定时器使用 clearTimeout 或 clearInterval，避免内存泄漏。
移动端需注意唤醒锁机制，防止屏幕关闭后定时器停止。

完整示例代码

// 综合定时提醒功能
class Reminder {
  constructor() {
    this.timers = {};
  }

  add(name, callback, delay, repeat = false) {
    if (repeat) {
      this.timers[name] = setInterval(callback, delay * 1000);
    } else {
      this.timers[name] = setTimeout(() => {
        callback();
        delete this.timers[name];
      }, delay * 1000);
    }
  }

  cancel(name) {
    const timer = this.timers[name];
    if (timer) {
      clearInterval(timer);
      clearTimeout(timer);
      delete this.timers[name];
    }
  }
}

// 使用示例
const reminder = new Reminder();
reminder.add("break", () => alert("站起来活动一下！"), 3600, true);

标签: js