Question

使用jquery编写的一些模板如下。它不起作用。任何有效使用jquery的建议。

<html>  
<head>  
<script type="text/javascript" src="/jquerycall/"></script>  
<script type="text/javascript">  
    $(document).ready(function()  
    {  
        self.setInterval("clock()",1000);  
        $("button").click(function()  
        {  
            clock;  
        });  
        function clock()  
        {  
            clock();  
            time=new Date();  
            var s = "<p>" + time + "</p>";  
            $(s).appendTo("div");  
        }
    });  
</script>  
</head>  
<body>  
<form method="post">  
<button type="button">Click Me</button>  
<div id="someid"></div>  
</form>  
</body>  
</html>

Answer 1

function clock()   
{   
   //clock(); /* Remove this recursive call or you'll just get an infinite loop */
   var current = new Date(); /* Make sure to use var on variables */
   var s = "<p>" + current + "</p>";
   $('#someId').html(s); /* Assuming you want to set 'someId' to 's', not try and append all things that match s to every div */
} 

var clockStarted = false;
$("button").click(function()   
{   
   if (!clockStarted) /* You only need to set the clock to start once */
      setInterval(clock, 1000);  /* You only want the interval to start after you've clicked the button and you don't need 'self'. */
   clockStarted = true;

   //clock(); /* Said 'clock;' before */   
});

总结：

调用函数时，需要使用括号和可选参数（例如functionName（）;而不是functionName）调用它。这适用于所有JavaScript。
想象一下，有一个小侏儒幸福地在你的代码中运行。当他走到一条线上时，他会读到并做到这一点。所以，假设你已经调用了clock（）。他到了那儿去“现在怎么样？哦，我得去钟（）”。所以他去了clock（）。他到了那儿去“现在怎么样？”哦，我必须去clock（）“。看看模式？他会继续这样做永远，但他实际上没有机会去做你想做的事情（），因为他一到达clock（）就看到的第一件事就是他需要去clock（）。这叫做无限递归。你真正想要的是说“我经常想要一个小侏儒去to clock（）并做那里的事情“这就是setInterval的作用。
$（s）.appendTo（'div'）选择匹配's'的所有内容（这将是什么都没有）并将它们附加到匹配'div'（每个div）的所有内容。相反，你想选择带有'someId'的div：“$（'＃someId'）”，并将's'追加到：“。append（s）;”。如果您不想追加而是替换，则需要使用“.html”而不是“.append”。

编辑

根据要求包含修改。
包含对'setInterval'和'var time'的修正，它按照Anurag's answer从我身上滑过。我并不是想对这些修复工作表示赞赏，但只是想在其他变化中作为综合答案的一部分，以满足OP的评论。

Answer 2

我在jsfiddle上添加代码时所做的一些注意事项：

为什么在没有任何基本条件的情况下在时钟内调用clock（）。它会遇到无限循环。我已经评论过了。
time = new Date()为全局对象增加了时间。您应该在它之前添加var以保持函数的本地化。
当使用字符串“clock（）”作为参数调用setInterval时，会抛出ReferenceError，因为时钟仅在外部匿名函数中定义。但是，当实际执行内联代码“clock（）”时，它不知道该匿名函数的范围或时钟函数。您应该传递对函数对象本身的引用，而不是传递字符串，因此当超时发生时，引用是完整的。
你为什么放self.setInterval()？我无法看到自己在其他任何地方被宣布。除非self指向window或者它是window.setInterval周围的自定义对象包装器，否则将抛出ReferenceError，因为您正在调用未定义对象上的方法（self）。

更新代码：

$(document).ready(function() {  
    function clock() {
        // clock(); // infinite loop
        var time = new Date();  // global leak
        var s = "<p>" + time + "</p>";
        $(s).appendTo("div");
    }

    setInterval(clock, 1000); // self?

    $("button").click(function() {  
        clock(); // call function
    });        
});

Answer 3

如果您在单击按钮后尝试按时间间隔执行clock（），则可以执行此类操作

    $(function()   
    {   
        $("button").click(function()   
        {   
            setInterval (clock, 1000);   
        });   
        function clock()   
        {   
            time=new Date();   
            var s = "<p>" + time + "</p>";   
            $(s).appendTo("div");   
        } 
    });

单击按钮时，这将以1000为间隔运行clock()。

使用jquery编写javascript函数

3 个答案:

编辑