关于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();

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

《关于jquery中callback函数的使用》有4个想法

发表评论

电子邮件地址不会被公开。 必填项已用*标注