对象中的javascript间隔

Question

我写了一个片段，它应该开始计算从 1 到 1000 或预定义的数字。

因为需要脚本多次，所以我认为将它写成一个对象并多次使用它是个好主意。但是我得到一个错误:

Uncaught ReferenceError :未定义根 (匿名函数)

我做错了什么？

     var time = function() {
        var root = this;
        var i=0;
        root.max = 1000;
        root.elm = false;
        root.runTime = function() {
            if(root.elm != false) {
                if (i < root.max) {
                    i++;
                    root.elm.text(i);
                } else {
                    clearInterval(root.interval);
                }
            }
            this.interval = setInterval('root.runtTime()', 5);
        };
    };

    if($(document).ready(function() {
        var countUp= new time();
        countUp.max = 1526;
        countUp.elm = $("#elm");
        countUp.runTime();
    });

Answer 1

这是因为下面一行:

this.interval = setInterval('root.runtTime()', 5);

因为它是一个字符串 has to be evaluated as a global object .

更改为以下内容以确保范围相同:

this.interval = setInterval(root.runtTime, 5);

还有一个错字(runtTime应该是runTime)，所以改成如下:

this.interval = setInterval(root.runTime, 5);

最后，您使用的是 setInterval，它将每 5 毫秒重复调用一次 root.runTime。如果你想递归调用它，请更改为 setTimeout:

this.interval = setTimeout(root.runTime, 5);

或者在 runTime 函数之外设置时间间隔:

   root.runTime = function() {
        if(root.elm != false) {
            if (i < root.max) {
                i++;
                root.elm.text(i);
            } else {
                clearInterval(root.interval);
            }
        }
    };
    this.interval = setInterval(root.runTime, 5); 

---

此外，您不需要 document.ready 周围的 if 语句。这是一个在 DOM 加载时触发的回调函数，因此不需要 if 语句。

$(document).ready(function() {
    var countUp= new time();
    countUp.max = 1526;
    countUp.elm = $("#elm");
    countUp.runTime();
});