jQuery Callback 方法

最新推荐文章于 2022-07-07 14:59:11 发布

eggplant_

最新推荐文章于 2022-07-07 14:59:11 发布

阅读量221

点赞数

本文链接：https://blog.csdn.net/eggplant_/article/details/83099537

版权

为什么会出现Callback方法？

由于 JavaScript 语句（指令）是逐一执行的 - 按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。

为了避免这个情况，您可以以参数的形式添加 Callback 函数。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide("slow",function(){//在函数没执行完，会调用自身，不会执行下一个
      alert("段落现在被隐藏了");
    });
  });
});
</script>
</head>
<body>
<button>隐藏</button>
<p>我们段落内容，点击“隐藏”按钮我就会消失</p>
</body>
</html>

所以执行后，文字会先消失，再会有弹窗。

初始界面：

点击按钮：

而一下代码，不适用Callback函数时就会在文字没显示之前，弹窗。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(1000);
    alert("现在段落被隐藏了");
  });
});
</script>
</head>
<body>
<button>隐藏</button>
<p>这是一个段落，内容很少</p>
</body>
</html>

结果：

显示与弹窗出现矛盾

eggplant_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery Callback 方法

为什么会出现Callback方法？由于 JavaScript 语句（指令）是逐一执行的 - 按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。为了避免这个情况，您可以以参数的形式添加 Callback 函数。&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&l...
复制链接

扫一扫