Question

我有这样的代码，可以得出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

请参阅第二和第三摘要以获得更好的答案。

您可以这样操作：当计数达到10时，使用setInterval和clearInterval。此外，要访问您的计数对象中的变量i，您可以使用{ {1}}：

this.i

如@ Hit-or-miss 所述，const countup = { i: 0, startCount: function() { const timer = setInterval(() => { console.log(this.i); if (++this.i === 10) { clearInterval(timer); } }, 1000); } } countup.startCount();不应在静态对象中使用。这是使用this的更好方法。

这使您可以拥有多个不共享其内部计数的计数器。

prototype

或者，使用 JavaScript类：

仅现代浏览器支持箭头功能和类。

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();

Answer 2

使用let声明i并使用setTimeout，因为您不必永远只调用console.log计数器十次。

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

在方法Javascript中添加setInterval

2 个答案: