關於js里cleartimeout的疑惑

1.發現這樣寫連時間都不會有

<script>
var flag = 0;
function startTime(){
    clearTimeout(t);
    var today=new Date();
    var h=today.getHours();
    var m=today.getMinutes();
    var s=today.getSeconds();// 在小於10的數字前加一個‘0’
    m=checkTime(m);
    s=checkTime(s);
    document.getElementById('txt').innerHTML=h+":"+m+":"+s;
    t=setTimeout(function(){startTime()},1000);
    
}
function checkTime(i){
    if (i<10){
        i="0" + i;
    }
    return i;
}
</script>

 

2.而這樣子的話會停，但是會顯示時間

function startTime(){
    
    var today=new Date();
    var h=today.getHours();
    var m=today.getMinutes();
    var s=today.getSeconds();// 在小於10的數字前加一個‘0’
    m=checkTime(m);
    s=checkTime(s);
    document.getElementById('txt').innerHTML=h+":"+m+":"+s;
    clearTimeout(t);
    t=setTimeout(function(){startTime()},1000);
    
}

 

3.發現這樣子的話時間不會停但是，cleartimeout會執行

<script>
var flag = 0;
function startTime(){
    
    var today=new Date();
    var h=today.getHours();
    var m=today.getMinutes();
    var s=today.getSeconds();// 在小於10的數字前加一個‘0’
    m=checkTime(m);
    s=checkTime(s);
    document.getElementById('txt').innerHTML=h+":"+m+":"+s;
    t=setTimeout(function(){startTime()},1000);
}
function checkTime(i){
    if (i<10){
        i="0" + i;
        if (flag > 2 )
        clearTimeout(t);
        flag += 1;
    }
    return i;
}
</script>

 

4.結合3，這樣寫的話會停止執行代碼

<script>
var flag = 0;
function startTime(){
    t=setTimeout(function(){startTime()},1000);
    var today=new Date();
    var h=today.getHours();
    var m=today.getMinutes();
    var s=today.getSeconds();// 在小於10的數字前加一個‘0’
    m=checkTime(m);
    s=checkTime(s);
    document.getElementById('txt').innerHTML=h+":"+m+":"+s;
    
}

 

以上問題很是疑惑，希望能隨着知識的增加而解決吧