为什么把setInterval放到clock函数中就不能继续调用呢如下

来源:8-4 取消计时器clearInterval()

qq_陈大吹_0

2018-06-30 09:45

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>计时器</title>

<script type="text/javascript">

  

   function clock(){

      var time=new Date();                

      document.getElementById("clck").value = time;

       i=setInterval(clock,1000);

   }

   var i=setInterval(clock,1000);


</script>

</head>

<body>

  <form>

    <input type="text" id="clck" size="50"  />

    <input type="button" value="start" onclick="clock()"/>

    <input type="button" value="Stop" onclick="clearInterval(i)" />

  </form>

</body>

</html>


写回答 关注

4回答

  • 如梦亦晨
    2018-07-18 18:02:07

    还有如果你非要把 var i=setInterval(clock,1000);放到clock()函数中,会导致clock()函数递归,系统会每隔1秒调用1次clock()函数并生成一次计时器。。。所以你点了stop键也没用,但是如果你的手速足够快,1秒钟内点击2次以上吧,会发现计时器能够停止计时。。。。如果点慢了,则递归函数会重新生成计时器并刷新时间。

  • 如梦亦晨
    2018-07-18 17:51:54

    不好意思,我弄错了。下一节里面会讲到这种用法,涉及到递归。

    你这里之所以运行不出来,是因为html中程序是从上往下运行的,文档一开始先加载上面的JavaScript文件,这时body标签中的input里的内容都没有加载完成,而你的写法中JavaScript里 document.getElementById("clck").value = time;这一句含有input标签的id “clck”,因为"clck"还没有定义,所以系统无法识别。

    解决方式是使用window.onload=function(){你的js代码};功能是文档内容加载完成之后,再最后加载你的js代码,这样系统就能够识别你的id“clck”了。

    另外你的函数中i没有声明,函数外面的i却声明了,有点混乱。


  • 如梦亦晨
    2018-07-18 17:17:33

    仔细看一下setInterval()的两种用法:

    第一种:setInterval(clock,1000);

    第二种:setInterval(“clock()”,1000);

    如果你把setInterval(clock,1000)放到clock()函数里面,那么这里函数clock()还没有定义完成,系统无法识别setInterval(clock,1000)中的clock是什么东西,故无法运行。

  • 慕少3363232
    2018-07-03 15:22:07

    语法不支持

JavaScript进阶篇

本课程从如何插入JS代码开始,带您进入网页动态交互世界

468060 学习 · 21891 问题

查看课程

相似问题