Javascript 如何显示多个仪表实例

我已经编写了一些JavaScript代码，可以生成两个动画仪表。理想情况下，我希望同时显示多个不同值的仪表，例如100%、50%和25%

目前，我可以显示另一个量表的唯一方法是再次处理代码并重命名变量。这并不完全符合我所知道的干法。然而，我已经开始使用对象构造函数，但是右边的仪表一直在运行/无限计数。我不知道为什么，或者我现在所做的是否正确。有人有什么建议吗。谢谢

let ctx = document.getElementById('canvasOne').getContext('2d');
let al = 0;
let startPos = 4.72;
let cw = ctx.canvas.width;
let ch = ctx.canvas.height;
let diff;

function progressSim () {
    diff = ((al / 100) * Math.PI*2*10); 
    ctx.clearRect(0, 0, cw, ch);
    ctx.lineWidth = 10;
    ctx.fillStyle = 'black';
    ctx.strokeStyle = 'pink';
    ctx.textAlign = 'center';
    ctx.fillText(al + '%', cw*.5, ch*.5+3, cw);
    ctx.beginPath();
    ctx.arc(35, 35, 30, startPos, diff/10+startPos, false);
    ctx.stroke();
    if (al >= 100) {
        clearTimeout(sim);
    }
    al++;
}

let sim = setInterval(progressSim, 20);


let ctxTwo = document.getElementById('canvasTwo').getContext('2d');
let alTwo = 0;
let startPosTwo = 4.72;
let cwTwo = ctx.canvas.width;
let chTwo = ctx.canvas.height;
let diffTwo;

function progressSimTwo () {
    diffTwo = ((alTwo / 100) * Math.PI*2*10);
    ctxTwo.clearRect(0, 0, cw, ch);
    ctxTwo.lineWidth = 10;
    ctxTwo.fillStyle = 'black';
    ctxTwo.strokeStyle = 'pink';
    ctxTwo.textAlign = 'center';
    ctxTwo.fillText(alTwo + '%', cwTwo*.5, chTwo*.5+3, cwTwo);
    ctxTwo.beginPath();
    ctxTwo.arc(35, 35, 30, startPosTwo, diffTwo/10+startPosTwo, false);
    ctxTwo.stroke();
    if (alTwo >= 50) {
        clearTimeout(simTwo);
    }
    alTwo++;
}

let simTwo = setInterval(progressSimTwo, 20);

我尝试使用对象构造函数：

function Gauge(ctx, al, startPos, cw, ch, diff) {
    this.ctx = ctx;
    this.al = al;
    this.startPos = startPos;
    this.cw = cw;
    this.ch = ch;
    this.diff = diff;
    this.progressSim = function () {
        diff = ((al / 100) * Math.PI*2*10);
        ctx.clearRect(0, 0, cw, ch);
        ctx.lineWidth = 10;
        ctx.fillStyle = 'black';
        ctx.strokeStyle = 'pink';
        ctx.textAlign = 'center';
        ctx.fillText(al + '%', cw*.5, ch*.5+3, cw);
        ctx.beginPath();
        ctx.arc(35, 35, 30, startPos, diff/10+startPos, false);
        ctx.stroke();
        if (al >= 100) {
            clearTimeout(this.sim);
        }
        al++;
    };
    this.sim = setInterval(this.progressSim, 20);
}

let gaugeTwo = new Gauge(document.getElementById('canvasTwo').getContext('2d'), 0, 4.72, ctx.canvas.width, ctx.canvas.height);

gaugeTwo.progressSim();

问题是

setInterval（）执行的代码在单独的执行上下文中运行 而不是从中调用它的函数。因此，政府必须采取这一措施 被调用函数的关键字设置为窗口（或全局） 对象

（-MDN）

调用

gaugeTwo.progressSim（）

时，与预期相反，

此

不是对

仪表的引用，而是对
窗口的引用。所以

clearTimeout(this.sim)

实际上是

clearTimeout(window.sim)

因此什么也不做

要解决此问题，您可以将
bind（）
进程sim（）
绑定到正确的上下文：

this.sim = setInterval(this.progressSim.bind(this), 20);


作为旁注，由于您已经在
Gauge
构造函数中调用了
progressSim（）
，因此无需通过
gaugeTwo.progressSim（）再次调用
太棒了！这很好用。感谢您的帮助和清晰的解释：）