跳转至

Jquery 动画效果回调

1. 介绍

  先来看看回调的英文定义：A callback is a function that is passed as an argument to another function and is executed after its parent function has completed。

  字面上的理解，回调函数就是一个参数，将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数。这个过程就叫做回调。回调，回调，就是回头调用的意思。主函数的事先干完，回头再调用传进来的那个函数,这样看来也不是很难理解。

  Callback函数在当前动画 100% 完成之后执行。

下面拿个例子更进一步的理解

  • 1.早上起来不论你是先刷牙还是先洗脸，都要等一个事情完毕后才能进行下一项，这就是一个同步的例子。
  • 2.然后刷牙的时候你也可以烧水喝 （不用等你刷完牙）这就是一个异步的例子。

所以回调与同步、异步并没有直接的联系，回调只是一种实现方式，既可以有同步回调，也可以有异步回调，还可以有事件处理回调和延迟函数回调，这些在我们工作中有很多的使用场景。

  许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。 

$("p").hide("slow")

  • speed 或 duration 参数可以设置许多不同的值，比如 "slow", "fast", "normal" 或毫秒。

2. 例子

2.1 不带回调

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<button>开始隐藏吧</button>
<p>人生苦短，我用Python</p>
</body>
<script>
    $(function () {
        $("button").click(function(){
            $("p").hide("slow");
            alert("段落现在被隐藏了");
        });
    });
</script>
</html>
不带回调函数

2.2 带回调

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<button>开始隐藏吧</button>
<p>人生苦短，我用Python</p>
</body> 
<script>
    $(function () {
        $("button").click(function(){
            $("p").hide("slow",function(){
                alert("段落现在被隐藏了");
            });
        });
    });
</script>
</html>
带回调函数

2.3 不回调

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<button id="start">开始隐藏吧</button>
<button id="stop">停止哥们</button>
<p>人生苦短，我用Python</p>
</body>
<script>
    $(function () {
        $("#start").click(function(){
            $("p").hide(5000,function () {
                alert("段落现在被隐藏了");
            });
        });
        $("#stop").click(function () {
            $('p').stop()
        })
    });
</script>
</html>
被立即停止的动画不会触发回调，被立即完成的动画会触发回调。

以下开始我点击开始隐藏，中途点击停止，停止后事件终止，不回调，但是我又点击开始隐藏后等待隐藏结束也就是事件发生完毕后，又回调了。

不回调