jQuery之timer不刷新，没有报错信息；增加调试信息显示timer只执行一次；

最新推荐文章于 2023-04-12 20:41:30 发布

shruber

最新推荐文章于 2023-04-12 20:41:30 发布

阅读量480

点赞数

分类专栏： javascript 文章标签： JavaScript jQuery timer

本文链接：https://blog.csdn.net/shruber/article/details/79022442

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

表现：timer不刷新，没有报错信息；增加调试信息显示timer只执行一次；
原因：

    var timer = $.timer (1000, MAIN.show_time,false);
    //var timer = $.timer (1000, MAIN.show_time(),false);
    //上边注释的这句是错误的，因为调用回调函数的时候，调用的是MAIN的一个属性，不是方法，不需要加括号；

没有弄清楚，执行一次的原因，感觉一次都不应该执行；

单步调试：
执行到下图中的86行时，直接进入MAIN.shou_time中，没有检测这个函数的格式是否正确，等该函数执行结束，进入jQuery.timer.js中，执行jQuery.timer对应的function，如下图中的第二张图所示，此时对callback进行了检测；

显示callback为undefined，之后，执行到图中的最后一行，直接return false，就没有执行下去了，但是还是不清楚为何执行了一次；

下图是语句正确的情况下，单步调试的情况：

此时，callback为function()，经15行判断后，继续向下执行；

通过以上测试，
执行一次应该是因为js执行的时候，读取到MAIN.show_time后就进入MAIN.show_time中执行了；
可能写Java留下的固定思维吧，很难理解这种情况，等以后更理解js的执行原理的时候，再回头看吧；

以下为源代码：
注：源代码是邵发的Java课程中的代码，特此说明；

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>My JSP 'test2.jsp' starting page</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    

    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
<!-- jquery & bootstrap -->
    <script src="jquery/jquery.js"></script>
    <script src="jquery/jquery.timer.js"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <script src="bootstrap/js/bootstrap.min.js"></script>


    <!-- 通用javascript -->
    <script src="common/AfUtility.js"></script> 

    <style>

        #test-panel .time
        {
            width: 80%;
            margin: 100px auto auto auto;
            border: 1px solid #888;
            border-radius: 4px;
            padding: 10px;
        }
    </style>
  </head>

  <body>

    <div id="test-panel">
        <div class="time"> </div>
    </div>

  <script>
    var MAIN = {};
    MAIN.panel = $("#test-panel");
    MAIN.time_str = function()
      {
          var now=new Date(); 
          var year=now.getFullYear();   //年 
          var month=now.getMonth()+1;   //月
          var day=now.getDate();      //日
          var hh=now.getHours();      //时
          var mm=now.getMinutes();     //分
          var sc=now.getSeconds();     //秒 

          var curTime = "";
          curTime += year;  
          curTime += "-";         
          curTime += month<10?'0'+month:month; 
          curTime += "-";
          curTime += day<10?'0'+day:day;
          curTime += " ";
          curTime += hh<10?'0'+hh:hh; 
          curTime += ":";
          curTime += mm<10?'0'+mm:mm;
          curTime += ":";
          curTime += sc<10?'0'+sc:sc; 
          return curTime;
      }

      /* 显示当前时间 */
      MAIN.show_time = function()
      {
        var tm = MAIN.time_str();
        $(".time",MAIN.panel).html(tm);
        console.log("1");
        console.log(tm);
      };

      $("#test-panel").ready(function(){
          var timer = $.timer (1000, MAIN.show_time,false);
         //var timer = $.timer (1000, MAIN.show_time(),false);
         //上边注释的这句是错误的，因为调用回调函数的时候，调用的是MAIN的一个属性，不是方法，不需要加括号；
      });

  </script>
  </body>
</html>