Javascript 使用回调函数注意事项

最新推荐文章于 2023-07-17 22:36:51 发布

想搞艺术的程序员

最新推荐文章于 2023-07-17 22:36:51 发布

阅读量506

点赞数

分类专栏： JavaScript 文章标签： JavaScript 函数回调

本文链接：https://blog.csdn.net/piaohai/article/details/46708205

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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是一门艺术

想搞艺术的程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript 使用回调函数注意事项

在javascript中经常会使用到回调函数, 并且保证代码结构清晰整洁, 会将回调后需要执行的逻辑另外定义一个函数来执行, 例如:IT Art 3秒后自动隐藏 setTimeout(function(){ var timePanel = document.getElementById("timePanel"); timePanel.sty
复制链接

扫一扫

专栏目录