今天在w3School上面看了下callback,执行一段JS后,效果和自己想的完全不一样呀,求解答
代码copy:http://www.w3school.com.cn/tiy/t.asp?f=jquery_hide_slow_wrong
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(2000);
alert("The paragraph is now hidden");
});
});
</script>
虽然了解一点JS的执行顺序,但还是有疑惑,上面的方法,点击button后,先执行代码
$("p").hide(2000);
再执行代码
alert("The paragraph is now hidden");
因为 $('p').hide(2000) 这个隐藏动作是异步的,但alert是同步的,并且会禁止浏览器的相关操作,也就是说,alert提示并点击确定按钮以后页面才能正常执行,p的隐藏动作才会开始。
导致异常的原因是 hide 控制的隐藏动作是异步执行的。因为如果是同步执行的,那么2000毫秒内浏览器不能做任何其他操作 包括 点击超链接之类的,那么你可以想想了,如果变成异步操作,就可以在所有业务相关代码执行完了以后,再去执行异步的操作。详情去研究一下javascript异步机制。
hide方法可以带一个回调函数,也就说等动画执行完了再执行的函数。
如果你想在p隐藏以后弹出提醒可以这么做 $('p').hide(2000,function(){/回调执行/});
$(document).ready(function(){
$("button").click(function(){
$('p').hide(2000, function () {
alert('The paragraph is now hidden');
});
});
});
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。