setInterval随着时间的推移变慢了

Question

我刚开始学习JavaScript。

我的问题是，网站在几秒钟后变得很慢。我使用setinterval来“打勾”屏幕上的东西，我觉得这可能是问题的原因。

以下是我的代码：

var r = [];
var ctx;

function init() {
    ctx = document.getElementById("canvas").getContext("2d");
    for(var i = 0; i < 20; i++) {
        var x = Math.floor(Math.random() * (ctx.canvas.width - 20)) + 10;
        var y = Math.floor(Math.random() * (ctx.canvas.height - 20)) + 10;
        r.push(new Rect(x,y, 10, 10, ctx));
    }
window.setInterval(tick,10);
window.setInterval(draw,10);
} 

function tick() {
    for(var i = 0; i < r.length; i++) {
        r[i].tick();
    }
} 

function draw() {
    ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
    for(var i = 0; i < r.length; i++) {
        r[i].draw();
        }
        ctx.lineWidth = 5;
        ctx.rect(0,0,ctx.canvas.width,ctx.canvas.height);
        ctx.stroke();
} 

这是另一个类：

class Rect {
    constructor(x, y, width, height, ctx) {
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
        this.cxt = ctx;
        this.xVel = 2.5;
        this.yVel = 2.5;

        if (Math.random() < 0.5) {
            this.xVel = -this.xVel;
        }

        if (Math.random() < 0.5) {
            this.yVel = -this.yVel;
        }
    } 

    tick(){
        this.x += this.xVel;
        this.y += this.yVel;
        if (this.x + this.width >= ctx.canvas.width | this.x <= 0){
            this.xVel = -this.xVel;
        }
        if (this.y + this.height >= ctx.canvas.height | this.y <= 0){
        this.yVel = -this.yVel;
        }
    }

    draw() {
        ctx.fillRect(this.x,this.y,this.width,this.height);
    } 
} 

那么这个问题的确切原因是什么，我该如何解决？

您可以在此处下载文件：https://drive.google.com/file/d/1pg4ASPvjbo2ua_7cCvQvzucLgbegtiw6/view?usp=sharing

- amsjntz

---

请添加一个[mcve] - 点击<>并创建一个可以运行的代码片段。 - undefined

不需要调用两次setInterval，而是这样做：setInterval(function(){tick();draw();},10);。 - user1636522

没有人会下载任何文件，因为它们可能被病毒感染。一个能够重现问题的工作代码片段应该包含在问题中，这样它就始终可用，而这在外部资源中通常并非如此。 - undefined

Answer 1

这个问题在您的绘图函数中出现。

Canvas会记住所有已经画过的线，随着时间的推移它会减慢您的动画速度。

解决方法是通过调用 ctx.beginPath() 重置已经绘制的线条列表。

function draw() {
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    for (var i = 0; i < r.length; i++) {
        r[i].draw();
    }
    ctx.beginPath()
    ctx.lineWidth = 5;
    ctx.rect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.stroke();
}

- Eponyme Web

Answer 2

首先，屏幕只以16毫秒的速度刷新（假设每秒60帧）。因此，在10毫秒内调用这两个函数有点过度。但是在现代浏览器中，我们现在有本地支持在屏幕刷新时执行任何操作的功能。它被称为请求动画帧：requestAnimationFrame(animationrDrawCallback)。

您可以在此处阅读更多信息：https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame。现在回到您的代码，可以像这样重构：

const r = [];
const ctx;

function init() {
    ctx = document.getElementById("canvas").getContext("2d");

    for(let i = 0; i < 20; i++) {
        const x = Math.floor(Math.random() * (ctx.canvas.width - 20)) + 10;
        const y = Math.floor(Math.random() * (ctx.canvas.height - 20)) + 10;

        r.push(new Rect(x,y, 10, 10, ctx));
    }

    // start our animation
    window.requestAnimationFrame(render);
} 

function render() {
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

    r.forEach((item) => {
        item.trick();
        item.draw();
    })

    ctx.beginPath();
    ctx.lineWidth = 5;
    ctx.rect(0,0,ctx.canvas.width,ctx.canvas.height);
    ctx.stroke();

    // this will be called at next screen refresh
    window.requestAnimationFrame(render);
}

使用requestAnimationFrame的最大好处是当标签页不再处于焦点状态时，它会停止执行。这对智能手机来说是一个巨大的提升。希望这有所帮助。

- Vijay Dev

---

这个答案太棒了！由于我不是一名专业的前端开发者，所以这个技巧我之前并不知道。实际上，这就是现代浏览器版本的旧CRT等待垂直回扫（waitsync）函数，我在DOS时代用来绘制图形的。 - undefined