DOM setInterval将加载到document.ready上,但不会加载到函数调用上

时间:2014-02-13 22:36:57

标签: javascript jquery html dom setinterval

这是我的第一个问题,请耐心等待。

我正在为我的课程做练习。我必须调用一个实例化setInterval对象的Scheduler。如果我从jQuery实例化所有运行正常,但如果我从函数调用,间隔不会开始。我无法理解不同行为背后的原因。有什么想法吗?

我有一个“服务器端”运行的node.js / express服务器,但它与此上下文无关。

这是我的HTML:

    <html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">

    var  ResetableScheduler = function(callback, miliseconds, data){
        var handler;
        this.start = function (){
            handler = setInterval(function(){callback(data + "\t(" + miliseconds + ")")}, miliseconds);
        }

        this.reset = function(newdata){
            clearInterval(handler);
            handler = setInterval(function(){callback(newdata + "\t(" + miliseconds + ")")}, miliseconds);
        }

        this.stop = function(){
            clearInterval(handler);
        }
    }

            // runs fine
    //$(function(){
    //  var rs = new ResetableScheduler(doTranslate_pt_en_2, 200, "Hello");      
        //rs.start(); 
        //setTimeout(function() { rs.reset("JavaScript"); }, 2500); 
        //setTimeout(function() { rs.stop(); }, 6000); 
    //});

    function doTranslate_pt_en_2(text){
        console.log("text = " + text);
    }

            // prints begin and then nothing...
    function begin(text)
    {
        console.log("begin");
        var rs = new ResetableScheduler(doTranslate_pt_en_2, 200, "Hello");      
        rs.start();
    }

</script>
</head>
<body>
    <div>
        <form method="post" action="/api/translate/pt/en">
            <input type="textbox" id="originaltext" name="originaltext">
            <input type="submit" id="translate-btn" onclick="begin(originaltext)" label="traduzir">
        </form>

        <input type="textbox" id="translatedtext" placeholder="<%= result %>">
    </div>  
    </body>
    </html>

1 个答案:

答案 0 :(得分:1)

将您的实例化代码附加到表单的submit事件:

$('form').on('submit', function(e) {
    //e.preventDefault();
    var rs = new ResetableScheduler(doTranslate_pt_en_2, 200, "Hello");      
        rs.start();
});

在这种情况下,您可以删除您在提交按钮上附加的onclick代码。