Question

我只是从javascript开始，我一直在尝试制作一个简单的秒表，我发现了几种方法可以做到这一点，然后我遇到了这个功能……代码无法用作秒表除非我们返回一个函数，否则有人可以帮助我理解为什么吗？

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

Answer 1

对于您的情况，您应该使用setInterval和clearInterval。

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

如果要使用秒表，可以在停止按钮单击事件中clearInterval

function stop(){
    clearInterval(timer);
}

更新：

我仅使用addEventListener和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 2

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 3

因为setTimeout的第一个参数必须是一个函数。
您的代码之所以有效，是因为它立即执行tick(i)函数，该函数返回一个函数，并且该函数在500毫秒后用作回调。

秒表无法正常运行

3 个答案: