Javascript 使用回调函数注意事项

来源：互联网发布：工资计算公式软件编辑：程序博客网时间：2024/05/17 06:03

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