jquery中的回调函数怎么用

Posted 2023-03-17

       因为javascript的运行机制的原因，jquery作为成熟的工具，为javascript提供了大量的回调函数(callback)。

       因为回调函数的工作原理以及工作时机，很多新手对回调函数不能熟练运用。回调函数的重要作用之一，就是在某项操作完成时，进行下一项操作。这两项操作功能上不一定耦合，但是逻辑上却必须耦合。意思是前一个操作实现的功能(效果)可以和回调函数实现的功能毫无联系，但是二者在代码逻辑上却是耦合的。耦合的意思是说，当一操作进行后，二操作会紧跟进行，二者的运行关系密不可分。回调函数增加了程序的耦合性，使代码的逻辑更容易理解。

       回调函数的用处在javascript中可谓处处体现，比如最为重要的就是AJAX回调。

       Jquery中提供了大量大回调函数，比如complete，success，fail等操作。这些操作的调用时机就如同他们的名字一样。success以为着成功的时候调用，等。

      举个简单的例子，以jquery中的动画为例，现在我想实现一个让id为animate的dom对象宽度边长的动画，在这个对象变长之后，我想要提示用户，这个对象已经变长了。因此，我得使用以下的代码：

$("#animate").animate(
    width: 200
, 
    duration： 500，
    success: function() 
        alert("width 已经变长了");
    ,
    error: function() 
        alert("出现了错误");
    
);

以上的代码定义了两个回调函数success和error，顾名思义，success是在成功的时候就会调用，error是在出错误之后调用。

这就是回调函数的基本运用。

看到这儿，或许你会问，为什么我不直接用这样的代码呢？

try 
    $("#animate").animate(
        width: 2000
    ， 500, "linear");
    alert(""width已经变长了);
 catch(error) 
    alert("出错了");

如果你测试你会发现，动画并未完成，就出现了alert弹窗。

这就是javascript的运行机制所造成的，javascript的运行机制分为同步和异步，异步操作会破坏脚本的执行流，使得程序跳过异步（异步仍然在进行）而进入接下来的程序，异步操作即使在进行，也不会影响javascript的继续执行，也就是不会产生阻塞。同步操作中的定时操作有着与异步很相似的运行机制，但是依然是同步操作。以上的错误正是由于定时操作引起的。

回调函数的作用，最为重要的运用，就是运用在异步操作和定时操作。

jquery中运用回调函数最重要的地方有两个，一个是动画回调（就是在动画执行完成，或者执行错误，或者执行失败的时候调用），以及ajax（同动画）。ajax与回调是密不可分的。

参考技术A 举个js里面最简单的例子，
数组的sort，
Array.sort(function(a,b)return a-b)
sort里面的函数就是回调函数。
jquery的回调函数用法和这个是一样的。都是传一个函数进去，
在方法内部执行。