Javascript 如何启动设置间隔的计数器

我有这个代码，但我想改进它：

var c = canvas.getContext("2d"); 
//this is called as an object method I created
var animar = function () {
   var obj = this;//saves the object that called it to later access to its properties
   var counter= 0;
   var animacion = setInterval(function(){
            c.save()
            c.clearRect(0, 0, canvas.width, canvas.height);
            c.rotate(0.1*counter);
            obj.pintar();
            c.restore();
            counter++;

   }, 50);
}

我想使用outter函数以备将来可能使用，但当我更改现有代码时，出现了一个提升问题，我不知道如何在不始终覆盖的情况下将计数器放入rotar（）函数中：

var animar = function () {
    var obj = this;
    var counter= 0;
    var animacion = setInterval(function(){
        rotar(obj)
    }, 50);
}

function rotar (obj) {
    c.save()
    c.clearRect(0, 0, canvas.width, canvas.height);
    c.rotate(0.1*counter);
    obj.pintar();
    c.restore();
    counter++;
}

我知道第一个是有效的，因为它们是嵌套的，而在第二个示例中不是。如何在不使用全局变量的情况下为setInterval设置计数器？

---

（我的意思是……如果我第二次调用它，它将不会从0开始。如果我在animar（）函数中将它设置为0，它会工作，但在每个使用计数器或使用不同名称的计数器的函数中，我需要将它设置为0。这两种可能性听起来不太好。）

---

谢谢

您只需将

var counter=0

置于函数之外：

var counter;
var animar = function () {
    var obj = this;
    counter = 0; // reset every time before 'animacion'...
    var animacion = setInterval(function(){
        rotar(obj)
    }, 50);
}
function rotar (obj) {
    c.save()
    c.clearRect(0, 0, canvas.width, canvas.height);
    c.rotate(0.1*contador);
    obj.pintar();
    c.restore();
    counter++;
}

或者，如果您不需要全局变量，可以按照Walter的答案进行操作，或者执行以下操作：

var animar = function () {
    var obj = this;
    var counter = 0; // new variable every time animar() is called
    var animacion = setInterval(function(){
        rotar(obj, counter);
        counter++;
    }, 50);
}
function rotar (obj, counter) {
    c.save()
    c.clearRect(0, 0, canvas.width, canvas.height);
    c.rotate(0.1*contador);
    obj.pintar();
    c.restore();
}

---

您只需将

var counter=0

置于函数之外：

var counter;
var animar = function () {
    var obj = this;
    counter = 0; // reset every time before 'animacion'...
    var animacion = setInterval(function(){
        rotar(obj)
    }, 50);
}
function rotar (obj) {
    c.save()
    c.clearRect(0, 0, canvas.width, canvas.height);
    c.rotate(0.1*contador);
    obj.pintar();
    c.restore();
    counter++;
}

或者，如果您不需要全局变量，可以按照Walter的答案进行操作，或者执行以下操作：

var animar = function () {
    var obj = this;
    var counter = 0; // new variable every time animar() is called
    var animacion = setInterval(function(){
        rotar(obj, counter);
        counter++;
    }, 50);
}
function rotar (obj, counter) {
    c.save()
    c.clearRect(0, 0, canvas.width, canvas.height);
    c.rotate(0.1*contador);
    obj.pintar();
    c.restore();
}

---

将

计数器

范围设置在

animar

对象内：

var animar = function () {
    var obj = this;
    obj.counter= 0;
    var animacion = setInterval(function(){
        rotar(obj)
    }, 50);
}

function rotar (obj) {
    c.save()
    c.clearRect(0, 0, canvas.width, canvas.height);
    c.rotate(0.1*obj.counter);
    obj.pintar();
    c.restore();
    obj.counter++;
}

---

将

计数器

范围设置在

animar

对象内：

var animar = function () {
    var obj = this;
    obj.counter= 0;
    var animacion = setInterval(function(){
        rotar(obj)
    }, 50);
}

function rotar (obj) {
    c.save()
    c.clearRect(0, 0, canvas.width, canvas.height);
    c.rotate(0.1*obj.counter);
    obj.pintar();
    c.restore();
    obj.counter++;
}

---

是的，但我在问题的末尾指定了它应该不使用全局计数器。我的意思是。。。如果我再次调用它，它将不会在0中启动。如果我在animar（）函数中将其设置为0，它会起作用，但在每个使用计数器或使用不同名称的计数器的函数中，我需要将其设置为0。这两个可能性听起来不太好。更新为重置为0。。。若你们仍然不想计数器在外面（为什么？），我可以再次更新。。。但是你能先告诉我为什么吗？我不知道这是否通常是这样做的，每次函数需要计数器时都会重置全局计数器，但我觉得这并不优雅。之后很容易忘记重新设置它。但也许没有更好的方法，这就是为什么我问是否有。我更新了一个方法，添加了一个没有全局变量的方法，或者你可以按照Walter的方法。在我看来，所有这些都是有效的，选择取决于上下文等等。是的，但我在问题的末尾指出，它应该不使用全局计数器。我的意思是。。。如果我再次调用它，它将不会在0中启动。如果我在animar（）函数中将其设置为0，它会起作用，但在每个使用计数器或使用不同名称的计数器的函数中，我需要将其设置为0。这两个可能性听起来不太好。更新为重置为0。。。若你们仍然不想计数器在外面（为什么？），我可以再次更新。。。但是你能先告诉我为什么吗？我不知道这是否通常是这样做的，每次函数需要计数器时都会重置全局计数器，但我觉得这并不优雅。之后很容易忘记重新设置它。但也许没有更好的方法，这就是为什么我问是否有。我更新了一个方法，添加了一个没有全局变量的方法，或者你可以按照Walter的方法。所有这些在我看来都是有效的，选择取决于上下文等等。