使用功能继承时,setTimeout不起作用

时间:2012-04-17 09:53:46

标签: javascript html oop

在阅读Douglas Crockford的“JavaScript:The Good Parts”之后,我尝试实现这样的计时器。它有私有变量(秒,小时,分钟)和三种公共方法:启动,停止和继续:

var timer = function() {
            var that = {};
            var seconds = 0;
            var hours = 0;
            var minutes = 0;
            var myTimer;

            that.getTime = function() {
                var time = hours + " : " + minutes + " : " + seconds;
                return time;
            }
            that.start = function() {
                seconds += 1;           
                if(seconds >= 60) {
                    seconds -= 60;
                    minutes += 1;
                }
                if(minutes == 60)
                    hours += 1;
                document.getElementById('hours').innerHTML = hours;
                document.getElementById('minutes').innerHTML = minutes;
                document.getElementById('seconds').innerHTML = seconds; 
                myTimer = setTimeout(function() {
                    start();
                }, 1000);
            };

            that.stop = function() {
                clearTimeout(myTimer);
            }
            that.reset = function() {
                seconds = 0;
                hours = 0;
                minutes = 0;
                clearTimeout(myTimer);
                document.getElementById('hours').innerHTML = hours;
                document.getElementById('minutes').innerHTML = minutes;
                document.getElementById('seconds').innerHTML = seconds;
            }
            return that;
        };

然后,我开始了:

<body onload="var t = timer();t.start();">

    <h1>Digital Clock</h1>
    <div id="wrap">
        <div>
            <ul>
                <li id="hours"></li>
                <li> : </li>
                <li id="minutes"></li>
                <li> : </li>
                <li id="seconds"></li>
            </ul>
        </div>
    </div>
    <br/>
</body>

有谁能告诉我我犯了什么错误?

更新:最后,我发现了问题。当你在另一个函数中使用函数(比如内部函数)时,“this”绑定到 global ,不是外在的功能。因此,在语句start()中,js将尝试在全局对象中查找函数。当然,没有这样的功能。在这里,我找到了两个解决方案:

  1. 使用“那个”

    myTimer = setTimeout(function(){                     that.start();                 },1000);

  2. 保存上下文:

    var timerInstance = this;

    myTimer = setTimeout(function(){                     timerInstance.start();                 },1000);

  3. 希望这会对你有所帮助。

1 个答案:

答案 0 :(得分:0)

以下是包含修改后代码的jsFiddle:http://jsfiddle.net/6YWLJ/

我用“this”替换了“that”(“this”代表你的计时器)而不是“var timer”我使用了“window.timer”

稍后编辑:这是更正代码的版本,因此它就像一个计时器(您的代码中有一些错误)http://jsfiddle.net/6YWLJ/2/