Question

我遇到的问题是我在每个构造函数中设置了一个已定义的秒数，但每次减少值时它都不会更新，它会保持在参数值，如360.当我打印秒到console.log时（）由于一些奇怪的原因它被困在360。任何人都知道一种方法来获取它，以便我可以有多个构造函数并更新每个构造函数的秒数？

setInterval(function(){renderTime("drag",0,0,drag,6,360)}, 1000);
setInterval(function(){renderTime("cool",0,0,cool,3,180)}, 1000);

总而言之，秒参数不会每秒更新秒数;它保留在原来设置的任何东西，如360或180。所以不要去360,359,358,357;它是360,360,360,360。

function renderTime(name,x,y,img,minute,seconds) {
seconds--;
console.log(seconds);
var canvas = document.getElementById(name);
var ctx = canvas.getContext('2d');

// Time
ctx.font = "15px Arial";
ctx.fillStyle = '#000';
ctx.fillText(seconds, (canvas.width/2)-8, height/2+80);

}

setInterval(function(){renderTime("drag",0,0,drag,6,360)}, 1000);

Answer 1

你的第一个setInterval函数将每1000毫秒运行以下函数：

renderTime("drag",0,0,drag,6,360);

在函数内部，函数中的局部变量seconds将减1，但下一秒函数将使用新的新变量调用。

解决方案是在任何函数之外设置一个全局变量：

var seconds = 360;

还要删除函数的最后一个参数，如下所示：

function renderTime(name,x,y,img,minute) {
seconds--;
console.log(seconds);
var canvas = document.getElementById(name);
var ctx = canvas.getContext('2d');

// Time
ctx.font = "15px Arial";
ctx.fillStyle = '#000';
ctx.fillText(seconds, (canvas.width/2)-8, height/2+80);

}

这就是你对该功能的调用。

setInterval(function(){renderTime("drag",0,0,drag,6)}, 1000);

注意如果你开始两个setInterval()同时调用相同的函数，这两个函数都会将变量seconds每秒减少一个，所以基本上，变量将减少两倍。

使用不更新的构造函数创建计时器

1 个答案: