使用setTimeout延迟两个setInterval执行的方案失效求助

嘿，我懂你想做什么——给用户脚本加个标签页切走时的标题闪烁更新提醒对吧？不过你当前的写法有个很典型的定时器冲突问题，才导致看起来好像“失效”了。

先给你说为啥原来的代码不行：你一开始就启动了第一个setInterval，它会每秒把标题改成提示语；1秒后第二个setInterval也启动了，同样每秒把标题改回原标题。这俩定时器是完全独立的，会互相抢着修改标题——比如第一个刚把标题改成提示语，第二个马上就给改回原标题，反过来也一样，结果要么标题一直停在其中一个内容，要么闪烁得完全混乱，根本达不到你要的交替提示效果。

给你两个更靠谱的解决方案，都是从根源上避免定时器冲突的：

方案一：单个定时器实现标题切换 #

用一个变量标记当前显示的是哪个标题，单个定时器负责每次切换状态，逻辑清晰还不会冲突：

// 先动态获取页面原标题，别手动写死，适配性更强
const originalTitle = document.title;
const updateNotice = "Please update your script!";
let isShowingNotice = false;

// 单个定时器处理切换逻辑
const titleToggleTimer = setInterval(() => {
  document.title = isShowingNotice ? originalTitle : updateNotice;
  isShowingNotice = !isShowingNotice;
}, 1000);

// 后续如果需要停止提示，调用 clearInterval(titleToggleTimer) 就行

方案二：结合页面可见性事件（更友好） #

如果你的需求是只有用户切走当前标签页时才提示，那可以搭配visibilitychange事件，只在用户看不到页面的时候启动闪烁，切回来就恢复原标题，不会打扰用户浏览：

const originalTitle = document.title;
const updateNotice = "Please update your script!";
let titleToggleTimer = null;
let isShowingNotice = false;

// 监听页面可见性变化
document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    // 用户切走标签页，启动闪烁
    if (!titleToggleTimer) {
      titleToggleTimer = setInterval(() => {
        document.title = isShowingNotice ? originalTitle : updateNotice;
        isShowingNotice = !isShowingNotice;
      }, 1000);
    }
  } else {
    // 用户切回标签页，停止闪烁并恢复原标题
    if (titleToggleTimer) {
      clearInterval(titleToggleTimer);
      titleToggleTimer = null;
    }
    document.title = originalTitle;
    isShowingNotice = false;
  }
});

这样不管哪种方案，都能完美实现你要的标题闪烁提醒效果，不会再出现“失效”的情况啦。

备注：内容来源于stack exchange，提问作者sophb.ccjt