您的位置：首页 > Web前端 > JQuery

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

2018-01-10 13:00 239 查看
表现：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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  JavaScript jQuery timer
相关文章推荐
新的分享
章节导航