Question

我最近制作了一个计时器对象和一个滴答函数，它会根据setTimeout循环每秒打勾。然而，滴答声没有延迟。如果您尝试以下代码，您会发现时间数字仅在几秒钟内增加到数千。如果有的话，我做错了什么？

<html>

<head>

</head>
    <button onclick="startTimer()">Start</button>
    <button onclick="stopTimer()">Stop Timer</button>
    <button onclick="readTimer()">Read Timer</button>

    <script>
function tick(){
    console.log("TICK TOCK");
    if(this.running == true){
        this.time += 1;
        console.log("HELLO!");
        setTimeout(this.tick(), 1000, $(this));
    }

}

function start(){
    this.running = true;
    this.tick();
}
function read(){
    return this.time;
}
function stop(){
    this.running = false;
}

function reset(){
    if(this.running == false){
        this.time = 0;
    }else {
        this.time = 0;
    } 
    this.tick();
}
function timer(){
    this.running = false;
    this.time = 0;
    this.start = start;
    this.read = read;
    this.stop = stop;
    this.reset = reset;
    this.tick = tick;
}
var t = new timer();

        function startTimer(){
            t.start();
        }   
        function stopTimer(){
            t.stop();
        }
        function readTimer(){
            alert("This is the current Timer Reading: " + t.time);
        }





    </script>
</html>

Answer 1

您的错误是您在setTimeOut上致电this.tick()。当您在this函数内调用tick()时，您已经在引用tick函数~~，因此您希望使用setTimeout(this, 1000);并且您的计时器将正常工作。~~

请参阅此解决方案：https://jsfiddle.net/sg7yf6r4/

详细了解该问题：Javascript objects calling function from itself

Answer 2

setTimeout的第一个参数应该是一个函数。但是，您传递的是函数的结果。因此，您应使用setTimeout(this.tick(), 1000, $(this));而不是setTimeout(this.tick, 1000, $(this));。

Answer 3

您正在传递已执行的函数，而不是setTimeout的函数引用。要传递函数本身，请删除括号。其次，要确保this在最终调用this时仍然是当前tick，请使用.bind(this)。

请注意，setTimeout的第三个参数会将该值传递给tick，这在您的情况下没用。注意：$(this)可能是其他一些代码的残余，因为$通常与jQuery一起使用，你没有使用它。

所以把它们全部放在一起，做：

setTimeout(this.tick.bind(this), 1000)

setTimeout不会延迟

3 个答案: