Javascript SetInterval和clearInterval解释

有人能解释为什么我们在drawInetrval之前执行函数stopDrawing（），以及这段代码将如何执行。

基本上是使用

clearInternal

停止

drawInterval

引用的间隔

您可以将其视为设置了

drawInterval=null

---

这样做是为了防止多个间隔触发：每次调用

startDrawing

，您都会重置当前正在进行的间隔，并启动一个新的间隔，该间隔将在1000/fps毫秒内触发，也就是说，

drawInterval

将在最后一次调用

startDrawing

后的

1000/fps

毫秒内触发。

只是清除间隔，这样您就不会同时运行多个间隔。

这是否意味着

startDrawing（）

函数被多次调用，或者引用正在触发

setInterval（draw，1000/fps）

多次？如果是这样，为什么我们要先使用

stopDrawing（）

函数，而不是在触发间隔之后。每次

imageSprite

加载完其内容时，都会调用

startDrawing

。如果在开始间隔后调用

stopDrawing

，只需立即停止，这不是您想要的。在实际开始间隔之前调用

stopDrawing

意味着，如果间隔已经在运行，那么它将被停止，并且新的间隔将在

1000/fps

毫秒后启动（因为它是一个间隔，所以它将每

1000/fps

毫秒连续触发一次）。

var fps = 30;
var drawInterval;

imageSprite.addEventListener('load',init,false);

function init() {
    drawBg();
    startDrawing();
}

function draw() {        
    clearJet();
    drawJet();
}

function startDrawing() {
    stopDrawing();
    drawInterval = setInterval(draw,1000 / fps);
}

function stopDrawing() {
    clearInterval(drawInterval);
}