点击返回按钮或导航标签后JavaScript代码失效求助

你的代码存在两个核心问题：

1. 递归setTimeout在首次满足条件并添加touched类后，会被return终止后续递归，之后即使页面DOM因无刷新导航/返回按钮触发重新渲染，函数也不会再执行检查。
2. 直接操作style.display的方式不够灵活，且当DOM重新渲染后，新生成的.cbt-tabs元素不会带有touched类，但此时检查逻辑已经停止。

方案1：改用setInterval持续检查 + 监听页面导航事件 #

这种方式保留轮询逻辑，但确保检查不会中途停止，同时在浏览器返回或无刷新导航时重置状态：

// 定义检查函数
const showAboutSection = () => {
  if(userInfo.logged && userInfo.subscriber && !userInfo.in_trial) {
    const section = document.querySelector('.cbt-tabs')
    if(section) {
      if(!section.classList.contains('touched')) {
        // 推荐用CSS类控制显示，替代直接操作style
        section.classList.add('show', 'touched')
        return
      }
    }
  }
}

// 启动轮询，每500ms检查一次
const checkInterval = setInterval(showAboutSection, 500)

// 监听浏览器返回按钮事件
window.addEventListener('popstate', () => {
  // 移除所有.cbt-tabs的touched类，让检查逻辑重新生效
  document.querySelectorAll('.cbt-tabs.touched').forEach(el => {
    el.classList.remove('touched', 'show')
  })
})

// 如果是单页应用（比如React/Vue/Angular），添加路由变化监听
// 以Vue为例：router.afterEach(() => { /* 同上重置逻辑 */ })
// 以React Router为例：useEffect(() => { /* 同上重置逻辑 */ }, [location.pathname])

// 页面卸载时清除定时器，避免内存泄漏
window.addEventListener('beforeunload', () => {
  clearInterval(checkInterval)
})

方案2：用MutationObserver监听DOM变化（更高效） #

不需要轮询，直接监听DOM中.cbt-tabs元素的添加，触发条件检查：

const showAboutSection = (section) => {
  if(userInfo.logged && userInfo.subscriber && !userInfo.in_trial) {
    if(!section.classList.contains('touched')) {
      section.classList.add('show', 'touched')
    }
  }
}

// 监听整个文档的DOM变化
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // 检查新增的节点中是否有.cbt-tabs
    mutation.addedNodes.forEach(node => {
      if(node.nodeType === 1) { // 元素节点
        if(node.matches('.cbt-tabs')) {
          showAboutSection(node)
        }
        // 检查子节点中是否有.cbt-tabs
        const childSections = node.querySelectorAll('.cbt-tabs')
        childSections.forEach(showAboutSection)
      }
    })
  })
})

// 启动监听
observer.observe(document.body, {
  childList: true,
  subtree: true
})

// 页面卸载时停止监听
window.addEventListener('beforeunload', () => {
  observer.disconnect()
})

补充：CSS样式建议 #

新增一个CSS类来控制显示，替代直接操作style.display：

.cbt-tabs {
  display: none;
}
.cbt-tabs.show {
  display: block;
}

这样无论是DOM重新渲染还是导航切换，都能确保符合条件的.cbt-tabs元素被正确显示，同时避免不必要的轮询开销。

内容的提问来源于stack exchange，提问作者Sebastian Fraczek