stopwatch not functioning properly

Question

I'm just starting with javascript, I've been trying to make a simple stopwatch, I found a couple of ways to do it , then I came across this function ... the code doesn't work as a stopwatch unless we return a function , can somebody help me understand why????

for (var i = 1; i <= 5; i++) {
   var tick = function(i) {
       return ()=>{console.log(i);}
   };
   setTimeout(tick(i), 500 * i);
}

Answer 1

below code will help you

<h1><time>00:00:00</time></h1>
<button id="start">start</button>
<button id="stop">stop</button>
<button id="clear">clear</button>
</pre>   

<script>
            var h1 = document.getElementsByTagName('h1')[0],
            start = document.getElementById('start'),
            stop = document.getElementById('stop'),
            clear = document.getElementById('clear'),
            seconds = 0, minutes = 0, hours = 0,
            t;

        function add() {
            seconds++;
            if (seconds >= 60) {
                seconds = 0;
                minutes++;
                if (minutes >= 60) {
                    minutes = 0;
                    hours++;
                }
            }

            h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);

            timer();
        }
        function timer() {
            t = setTimeout(add, 1000);
        }



       start.onclick = function(){
       timer();
       start.disabled=true;
       }

       /* Stop button */
       stop.onclick = function() {
       clearTimeout(t);
       start.disabled=false;
       }

        /* Clear button */
        clear.onclick = function() {
            h1.textContent = "00:00:00";
            seconds = 0; minutes = 0; hours = 0;
        }

        </script>

Answer 2

You should use setInterval and clearInterval for your case.

var i = 10;
    var tick = function(i) {
                return ()=>{
                    console.log(i--);
                    if(i == 0) clearInterval(timer);
                }
       };
    var timer = setInterval(tick(i), 500);

If you want to have stopwatch, you can clearInterval in stop button click event

function stop(){
    clearInterval(timer);
}

Update:

I combined Start and Stop in only one button using addEventListener and removeEventListener

var i = 1;
var timer;
var tick = function(i) {
            return ()=>{
                console.clear();
                console.log(i++);
                
                //if(i == 0) clearInterval(timer);
            }
   };
function start(){
    document.getElementById("start").disabled = true;
    document.getElementById("stop").disabled = false;
    timer = setInterval(tick(i), 500);
    
}
function stop(){
    clearInterval(timer);
    document.getElementById("stop").disabled = true;
    document.getElementById("start").disabled = false;
}


(function() {
		document.getElementById("start2").addEventListener("click", start2);
})();

function start2(){
    
    timer = setInterval(tick(i), 500);
	document.getElementById("start2").innerHTML = "Stop";
	document.getElementById("start2").removeEventListener("click", start2);
	document.getElementById("start2").addEventListener("click", stop2);
    
}
function stop2(){
    clearInterval(timer);
    document.getElementById("start2").innerHTML = "Start";
	document.getElementById("start2").removeEventListener("click", stop2);
	document.getElementById("start2").addEventListener("click", start2);
}

<button id="start" onclick="start()">Start</button>
<button  id="stop" onclick="stop()">Stop</button>

<h2>Combine Start and Stop</h2>
<button id="start2" >Start</button>

Answer 3

Because setTimeout first parameter has to be a function.
Your code works because it immediately executes the tick(i) function, which returns a function and that one is used 500ms later as callback.