同一个按钮开始停止计时器

我需要同一个按钮设置点击开始或者停止计时器
第一次点击计时器开始第二次点击计时器结束,但是因为定时器是异步函数,设置一个布尔值的话写在外面不太好因为定时器还没有开始他就开始了,如果写在里面的话也不太好,因为这个计时器是要一直执行下去的,数字减了一次之后这个布尔值就变了,所以实在是不知道该怎么做


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>

        </style>
    </head>
    <body>
        <input type="button" value="开始" onclick="a()"/>
        <input type="text" id="t" />
        
        <script>
            var n = 0;
            var x = 1;
            function a(){
                x = x + 1
                b()
            }
            function b(){
                var timer = setInterval(() => {
                    
                    if( x % 2 == 0){
                        n = n + 1
                        document.getElementById('t').value = n
                    }
                    else{
                        clearInterval(timer)
                    }
                },1000)
            }

                // document.getElementById('t').value = 10
            
        </script>
        
    </body>
</html>

如有帮助请采纳


<button id="start">开始</button>
    <div id="time"></div>
    <script>
        var app =0;
        var str =document.getElementById('start')
        var time =document.getElementById('time')
        var tt = true;
        var timer;
        str.onclick=function(){
            clearInterval(timer);
            if(tt){
                tt=!tt;
                return timer =setInterval(function(){app+=1;time.innerHTML=app},1000);
            }else{
                clearInterval(timer);
                tt=!tt;
            }
        }
      
    </script>
//请采纳