开发者社区> 问答> 正文

jquery alert

今天在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");

展开
收起
a123456678 2016-07-13 15:54:08 1932 0
1 条回答
写回答
取消 提交回答
  • 因为 $('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');
      });
      });
    });
    2019-07-17 19:55:43
    赞同 展开评论 打赏
问答分类:
问答标签:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
23-Vue.js在前端...1506518547.pdf 立即下载
低代码开发师(初级)实战教程 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载

相关实验场景

更多