如何用JavaScript编写满足触发条件自增的简易计数器函数

现有代码存在的问题 #

• seq变量没有使用关键字声明，直接赋值会自动变成全局变量，容易和全局作用域下的其他同名变量冲突，造成不可预期的bug。
• 仅定义了seqcounter函数但没有主动调用，页面加载后初始化变量、绑定点击事件的逻辑都不会执行，功能无法生效。
• 如果不小心多次调用seqcounter函数，会重复给按钮绑定点击事件，同时每次调用都会把seq重置为0，不符合需求。

优化建议 #

• 优先使用let/const代替var声明变量，符合现代JS语法规范，避免变量提升带来的异常问题。
• 不需要单独定义初始化函数，直接监听页面加载事件执行初始化逻辑即可，避免漏调用的问题。
• 封装变量作用域，除非你确实需要全局访问seq，否则优先用闭包把seq藏在局部作用域里，避免污染全局命名空间。
• 先判断获取的DOM元素是否存在，避免页面没有对应元素时报空指针错误。
• 缓存DOM查询结果，不用每次操作都重新查询DOM，提升性能。

优化后的代码示例 #

如果你不需要在其他地方访问seq，推荐用闭包封装的版本：

window.addEventListener('load', () => {
  let seq = 0
  const myBtn = document.getElementById('myBtn')
  if (!myBtn) return
  myBtn.addEventListener('click', () => {
    seq++
    // 这里补充计数后逻辑，比如更新页面显示、打印数值等
  })
})

如果你确实需要全局访问seq，可以显式挂载到window上：

window.addEventListener('load', () => {
  window.seq = 0
  const myBtn = document.getElementById('myBtn')
  if (!myBtn) return
  myBtn.addEventListener('click', () => {
    seq++
    // 后续逻辑
  })
})

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