我怎样才能停止重新启动计数器

Question


   var time=0;
   var i=0;
   
   function stopwatch(){
       document.getElementById("p1").innerHTML=i;
       i++; }
       
  
  
   function start(){
      time=window.setInterval('stopwatch()',500);
   }

    function stop(){
       window.clearInterval(time);
   }
  </script>

<p id="p1">0</p>
<button onclick="start()">Start counter</button>
<button onclick="stop()">Stop counter</button>

我正在尝试构建一个秒表，但如果我多次单击开始按钮每当我点击 'start button' 并且 'stop' 按钮不起作用时，时间过得越来越快我该如何解决这个问题

Answer 1

  var time=0;
  var i=0;

  function stopwatch(){
    document.getElementById("p1").innerHTML=i;
  i++; }


  function start(){
    if(time) return;
    time=window.setInterval('stopwatch()',500);
  }

  function stop(){
    window.clearInterval(time);
    time = null;
  }

<p id="p1">0</p>
<button onclick="start()">Start counter</button>
<button onclick="stop()">Stop counter</button>

Answer 2

您可以在启动时禁用该按钮并在停止时启用它

var time=0;
var i=0;
var start_btn = document.getElementById("start")

 function stopwatch(){
     document.getElementById("p1").innerHTML = i;
     i++; 
 }


 function start(){
    time = window.setInterval(() => stopwatch(),500);
    start_btn.disabled = true;
 }

  function stop(){
     window.clearInterval(time);
     start_btn.disabled = false;
 }

<p id="p1">0</p>
<button id="start" onclick="start()">Start counter</button>
<button onclick="stop()">Stop counter</button>

Answer 3

跟踪标志并处理它。但是禁用按钮是一种良好的用户体验行为。您可以将两者组合如下。

 var time=0;
 var i=0;
 var started = false;
 
   function stopwatch(){
      document.getElementById("p1").innerHTML=i;
      i++; 
    }
  
   function start(){
      if(!started){
          started = true;
          updateButtons();
          time=window.setInterval('stopwatch()',500);
      }
   }

    function stop(){
        started = false;
        updateButtons();
       window.clearInterval(time);
   }
   function updateButtons(){
        document.getElementById("startbtn").disabled = started
        document.getElementById("stopbtn").disabled = !started
   }

<p id="p1">0</p>
<button id="startbtn" onclick="start()">Start counter</button>
<button id="stopbtn" onclick="stop()">Stop counter</button>

我怎样才能停止重新启动计数器

how can I stop re-initiate counter

javascript

setinterval