Question

为什么这个脚本无法正常工作（有时冻结）？

var period = 600;

function Boom(){  
    var timeBoom = window.setInterval(function() {  
        if (period > 300) {  
            period = 300;  
            setTimeout(function () {  
                period = 600;  
            }, 1000);  
        } else {  
            period = 600;  
        }  
    }, 5000);       
}

function Shake() {  
    this.draw = function() {   
        setTimeout(function () {  
            Boom()  
        }, 5000)    
    };  
}

我需要每5秒钟调用一次函数Boom()，但是在执行（var period = 600）之后应该再次更改变量。

Answer 1

John Resig - jQuery的创建者 - 在javascript timers上有一个非常好的作品。

基本上，由于javascript是单线程的，setInterval不能保证在每个时间间隔触发 - 如果js引擎在特定周期忙碌，它将错过一个节拍。

setTimeout将始终调用，但如果另一段代码在时间到期时已经排队，则可能会有额外的延迟 - 也就是说，等待时间可能比您传入的毫秒数更长作为第二个论点。

我猜你的一些setTimeout代码可能会妨碍其中一个setInterval循环，但这只是猜测。

如果这是问题所在，请尝试命名您传入setInterval的匿名fn，然后将其传递到setTimeout，而不是等待5000毫秒，另一个调用（递归）间隔到期时的相同功能。

Answer 2

好的伙计，基本上你需要摆脱所有不需要的计时。

首先，简要解释一下：

setTimeout (func, x)将在 x毫秒后执行函数func 。

setInterval (func, x)将执行函数func 每个 x毫秒。

因此您只需要设置间隔一次，然后让它工作。我已经更正了你的代码：

var period = 600; function Boom() { if (period != 300) { period = 300; } else { period = 600; } } function Shake() { this.draw = function () { var time = new Date().getTime(); var shakeX = (Math.sin(time * 2.0 * Math.PI / period) + 0); this.x = shakeX; var shakeY = (Math.sin(time * 2.0 * Math.PI / period) + 0); this.y = shakeY; this.context.drawImage(image, 0, 0); this.context.translate(this.x, this.y); setInterval(Boom, 5000) }; }

每5秒更改一次变量值并返回

2 个答案: