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

Javascript 使用回调函数注意事项

2015-07-01 11:19 555 查看

javascript中经常会使用到回调函数, 并且为了保证代码结构清晰整洁, 会将回调后需要执行的逻辑另外定义一个函数来执行, 例如:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>IT Art</title>
</head>
<body>
<div id="timePanel">3秒后自动隐藏</div>

<script type="text/javascript">
setTimeout(function(){
var timePanel = document.getElementById("timePanel");
timePanel.style.display = 'None';
}, 3000);
</script>
</body>
</html>

可以看到, 如果setTimeout 中直接使用匿名回调时, 当有很多的逻辑判断代码时, 会导致代码嵌套过多, 不容易阅读和维护, 所以我们经常这么做:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>IT Art</title>
</head>
<body>
<div id="timePanel">3秒后自动隐藏</div>

<script type="text/javascript">
var timeOutCallBack = function(){
var timePanel = document.getElementById("timePanel");
timePanel.style.display = 'None';
};
setTimeout(timeOutCallBack, 3000);
</script>
</body>
</html>

这里比较容易犯的一个错误就是:

setTimeout(timeOutCallBack, 3000);

如果不小心的话, 很容易写成这样:

setTimeout(timeOutCallBack(), 3000);

增加了一个括号, 就会导致timeOutCallBack在执行到setTimeout 这一行后就直接被运行, 不会延迟3秒.

<< IT是一门艺术

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： JavaScript 函数回调

相关文章推荐

新的分享

章节导航