javascript - 在 Javascript 方法中添加 setInterval

Question

这个问题已经有答案了:

JavaScript closure inside loops – simple practical example (45 个回答)

已关闭 4 年前。

我有这个代码，我可以得到数字 0 - 9:

var countup = {
    i: 0,
    startCount: function () {
        for(i = 0; i < 10; i++){
            console.log(i);
        }
    }
}

countup.startCount();

现在我需要能够让它以 1 秒的间隔输出数字，我尝试了下面的代码，但它只是给了我一个未定义的输出:

var countup = {
    i: 0,
    startCount: function () {
        setInterval(function() {
            for(i = 0; i < 10; i++){
                console.log(i);
            }
        }, 1000)
    }
}
countup.startCount();

有人知道如何编辑上面的代码，以一秒的间隔给出所需的数字 0 - 9 输出吗？

谢谢!

Answer 1

See the second and third snippets for better answers.

您可以这样做，当计数达到 10 时，使用 setInterval 和 clearInterval。另外，要访问变量 i countup 对象，您可以使用 this.i 来完成:

const countup = {
    i: 0,
    startCount: function() {
        const timer = setInterval(() => {
            console.log(this.i);
            if (++this.i === 10) {
                clearInterval(timer);
            }
         }, 1000);
    }
}

countup.startCount();

正如 @Hit-or-miss 提到的，this 不应该在静态对象中使用。这是使用原型(prototype)实现此目的的更好方法。

这允许您拥有多个不共享内部计数的计数器。

function Countup() {
  this.i = 0;
}

Countup.prototype = {
    constructor: Countup, // Good practice

    startCount: function() {
        const timer = setInterval(() => {
            console.log(this.i);
            if (++this.i === 10) {
                clearInterval(timer);
            }
        }, 1000);
    }
};

const counter1 = new Countup();
const counter2 = new Countup();

counter1.startCount();
counter2.startCount();

或者，使用JavaScript 类:

The arrow functions and classes are supported only in modern browsers.

class Countup {
    constructor() {
        this.i = 0;
    }

    startCount() {
        const timer = setInterval(() => {
            console.log(this.i);
            if (++this.i === 10) {
                clearInterval(timer);
            }
        }, 1000);
    }
};

const counter1 = new Countup();
const counter2 = new Countup();

counter1.startCount();
counter2.startCount();