关于jquery中callback函数的使用

今天在做一个网站开发的过程中遇到了一个小问题，解决之后，发现这应该是很多学习jquery的新手朋友们会遇到的问题，故在这里记录一下。

基本需求和实现要点：这是一个购物网站，在用户点击“收藏店铺”或者“收藏商品”之后，用ajax把数据传递给后台进行处理，后台返回一个值给html，再由html根据返回的值，在页面上用一个模态框显示信息，随后模态框淡出。

在这里，为了简化问题，我们暂时不谈后台的处理。

似乎看上去，对模态框，用一个fadeout方法来处理就可以了，但是事实上，用户可能会进行连续多次的点击收藏，此时模态框就不一定能正确显示和淡出了。为此，我们自然而然的得到另外一种方案，就是在模态框淡出之后，删除该模态框元素，待下次再点击，再创建这个元素。

于是顺着这个思路，我犯了一个错误。

我在jquery中写了这么三句代码

$(document.body).append('<div id="top_alert">'+text+'</div>');
$('#top_alert').fadeOut(3000);  
$('#top_alert').remove();

按照往常编程的逻辑思维，元素fadeOut之后，被删除。而事实上，按照上面的写法，我们是看不到fadeOut的效果的，因为在我们还没看到效果，下面的remove已经起作用了，即元素已经被删除。

这里就是我们新手经常会犯的错误之一。

事实上，jquery给我们提供了callback函数这种机制，就是用来解决这个问题的。

我们常常看到一些jquery函数会有callback这个参数，比如

$(selector).fadeOut(speed,callback);

这里fadeOut方法的第二个参数callback，就是一个回调函数，意思就是说，在fadeOut 函数执行完之后，会执行callback函数。

回到刚开始的问题，此时就很明朗了。我只需要把$(‘#top_alert’).remove();这一句写进callback函数里面就行了。具体实现如下：

$(document.body).append('<div id="top_alert">'+text+'</div>');
$('#top_alert').fadeOut(3000,function(){
$('#top_alert').remove();

这样就可以不出错的实现该效果了。