如何实现Reset按钮正确重置setInterval计数器

你之前的重置逻辑只修改了页面上显示的数字，没有修改真正存储计数数值的变量c——计数器累加的数值全存在这个变量里，它还保留着上次停止时的数值，下次启动自然会接着之前的数继续加。
另外你之前把重置显示的逻辑写进了myCounter函数里，这个函数是定时器每秒都会调用的计数函数，写在这里会导致每次计数刚加1就被改回0，完全无法正常计数。

重置功能需要同时完成3个操作，缺一个都会出问题：

• 先调用clearInterval(myTimer)停掉正在运行的计数定时器，避免重置过程中计数还在后台跑
• 把存储计数的变量c赋值为0，这是保证下次计数从0开始的核心
• 把id为demo的元素显示内容更新为0，让页面显示和实际计数数值同步

<p id="demo">0</p>
<button onclick="myTimer = setInterval(myCounter, 1000)">
  Start counter!
</button>
<button onclick="clearInterval(myTimer)">
  Stop counter!
</button>
<!-- 新增重置按钮 -->
<button onclick="resetCounter()">
  Reset counter!
</button>
<script>
  var c = 0;
  var myTimer;
  function myCounter() {
    document.getElementById("demo").innerHTML = ++c;
  }
  // 单独写重置函数，不要和计数函数混写
  function resetCounter() {
    clearInterval(myTimer);
    c = 0;
    document.getElementById("demo").innerHTML = c;
  }
</script>

• 不要把不同功能的逻辑混写在同一个函数里：myCounter只负责每秒给计数加1、更新显示，重置逻辑要单独写新函数
• 所有和计数相关的状态（这里就是存数值的c、存定时器id的myTimer），重置的时候都要同步处理，不能只改页面显示的“表面功夫”

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