关于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;
    
}

以上问题很是疑惑，希望能随着知识的增加而解决吧