setTimeout将不会延迟
[英]setTimeout will not delay
问题描述
I was recently making a timer object and a ticking function that would tick every second according to a setTimeout loop. 
我最近正在制作一个计时器对象和一个滴答函数，它们会根据setTimeout循环每秒滴答。 However, there was no delay in the ticking. 但是，报价没有延迟。 If you try out the below code, you will find that the time number has increased to the thousands in only a few seconds. 如果尝试下面的代码，您会发现时间仅在几秒钟内就增加到了数千。 What, if anything, am I doing wrong? 我做错了什么（如果有的话）？
<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>
3 个解决方案
解决方案1
1 已采纳 2017-05-30 22:54:42
Your error is that you call setTimeOut on this.tick() . 你的错误是你叫setTimeOut上this.tick() When you call this inside the tick() function, you are already referring to the tick function, so you want to use setTimeout(this, 1000);在tick()函数中调用this函数时，您已经在引用tick函数， 因此您想使用 setTimeout(this, 1000);and your timer will work properly. 并且您的计时器将正常工作。
See this fiddle for solution: https://jsfiddle.net/sg7yf6r4/ 有关解决方案，请参见此提琴： https : //jsfiddle.net/sg7yf6r4/
Read more about the issue: Javascript objects calling function from itself 阅读有关此问题的更多信息： Javascript对象从自身调用函数
解决方案2
1 2017-05-30 22:59:02
The first parameter of setTimeout should be a function. setTimeout的第一个参数应该是一个函数。 However, you are passing it the result of a function. 但是，您将其传递给函数的结果。 So instead of setTimeout(this.tick(), 1000, $(this)); 因此，而不是setTimeout(this.tick(), 1000, $(this)); you should use setTimeout(this.tick, 1000, $(this)); 您应该使用setTimeout(this.tick, 1000, $(this)); . 。
解决方案3
1 2017-05-31 04:32:55
You are passing an executed function, instead of a function reference to setTimeout . 您传递的是已执行的函数，而不是对setTimeout的函数引用。 To pass the function itself, remove the parentheses. 要传递函数本身，请删除括号。 Secondly, to make sure this will still be the current this when tick is eventually invoked, use .bind(this) . 其次，要确保this仍然是当前this时候tick最终被调用，使用.bind(this) 。
Note that the third argument of setTimeout would pass that value to tick , which is of no use in your case. 请注意， setTimeout的第三个参数会将该值传递给tick ，在您的情况下这没有用。 NB: That $(this) is probably a remnant of some other code, since the $ would be typically used with jQuery, which you are not using. 注意： $(this)可能是其他一些代码的剩余部分，因为$通常与不使用的jQuery一起使用。
So taking that all together, do: 因此，综合考虑一下：
setTimeout(this.tick.bind(this), 1000)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.