jQuery回调函数的定义及用法实例

本文实例讲述了jQuery回调函数的定义及用法。分享给大家供大家参考。具体分析如下:

jQuery代码中对回调函数有着广泛的应用,对其有精准的理解是非常有必要的,下面就通过实例对此方法进行简单的介绍。

代码实例如下:

利用回调函数,当div全部隐藏之后弹出一个提示框。

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>我们</title>
<style type="text/css">
div{
  height:150px;
  width:150px;
  background-color:green;
  margin-top:10px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").slideUp(2000,function(){alert("隐藏完毕")});
  })
})
</script>
</head>
<body>
<div></div>
<button>点击查看效果</button>
</body>
</html>

上面的代码运行非常良好,很有次序。在很多实际应用中往往希望让代码完成某个动作以后再去做另一个动作。
代码貌似应执行的效果应该和上面代码是一样的,但是运行结果且并非我们所预料,而是先弹出提示框,然后再隐藏div元素。这并不是说slideUp()没有开始执行。

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>我们</title>
<style type="text/css">
div{
  height:150px;
  width:150px;
  background-color:green;
  margin-top:10px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").slideUp(2000);
    alert("隐藏完毕");
  })
})
</script>
</head>
<body>
<div></div>
<button>点击查看效果</button>
</body>
</html>

下面简单通俗的总结一下什么是回调函数。看下面这段代码:

代码如下:

function a(){alert("我是一个函数")}
a();

以上是最常用的调用函数的方式,用函数的实现直接调用,而回调函数却不是这样的,它是将自己的地址作为参数传递给另一个函数,当发生特定的事件的时候就会使用作为参数传递过来的回调函数地址来调用回调函数。就拿上面使用回调函数的那个代码来说,它是把function函数的地址作为参数传递给slideUp()方法,当slideUp()动作完成之后,就会通过传过来的地址参数调用function函数。

希望本文所述对大家的jquery程序设计有所帮助。

(0)

相关推荐

  • jQuery回调方法使用示例

    本文实例讲述了jQuery回调方法使用.分享给大家供大家参考,具体如下: 方法参数带有function方法,并且执行完后把计算的数据返回 function a1(p){ // p 为调用此方法传递的object对象 var callback = p?p.callback:null; // 获取参数对象中的回调方法 if($.isFunction(p.callback)){ // 如果有回调方法 callback("123"); // 返回一个计算后的数据,方便回调方法使用它 } } f

  • 浅谈jquery回调函数callback的使用

    回调函数必须是全局函数或者静态函数,不可定义为某个特定的类的成员函数 callback函数在当前动画100%完成之后执行 复制代码 代码如下: $("p").hide(1000); alert("the paragraph is now hidden"); <!--未使用回调函数,段落未完全隐藏时就弹出信息--> $("p").hide(1000,function(){alert("the paragraph is now

  • jQuery AJAX回调函数this指向问题

    如在全局作用域调用一个含this的对象,此时当前对象的this指向的是window.为了让this的指向符合自己的意愿,JavaScript提供了两个方法用以改变this的指向,它们是call和apply,当然也有利用闭包来实现的方法.本文通过一个例子来说明这些问题. 先看一段演示代码,这代码只供演示用,没有实际意义. 复制代码 代码如下: //一个没有实际意义的socket连接对象 var socket = { connect: function(host, port) { alert('Co

  • 使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享

    我知道这些函数都是异步执行(asyncronously)并且会延迟一段时间返回,所以我想知道是否有一种方式,使我可以使用单个回调,并行地加载它们,就像JS加载器 curljs 所做的那样. 很幸运! 通过jQuery.when, 我可以并发地加载两个请求,只执行一次回调! jQuery 脚本正如我提到的,下面是加载脚本和一个JSON资源的用例: 复制代码 代码如下: $.when( $.getScript('/media/js/wiki-min.js?build=21eb633'),  $.ge

  • jQuery插件扩展实例【添加回调函数】

    本文实例讲述了jQuery插件扩展的方法.分享给大家供大家参考,具体如下: <script language="javascript" type="text/javascript"> function doSomething(callback) { // - // Call the callback callback('stuff', 'goes', 'here'); // 给callback赋值,callback是个函数变量 } function fo

  • jquery序列化表单以及回调函数的使用示例

    在开发项目中,将前台的值传给后台,有时的JSP表单中的值有一两个,也有全部的值,如果这时一个个传,必定不是很好的办法,所以使用jQuery提供的表单序列化方法,可以很好的解决这个问题,同时可以封装成通用的函数,执行成功可以调用各自的回调函数,实现各自的功能. 代码如下: function queryUserInfo(actionUrl,formId,fun){ var params=new Object(); //声明数组 $.each($("#"+formId).serializeA

  • jQuery的load()方法及其回调函数用法实例

    本文实例讲述了jQuery的load()方法及其回调函数用法.分享给大家供大家参考.具体如下: 下面的js代码演示了jQuery的load()方法的使用,并演示了带回调函数(callback)的load方法的使用 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(fun

  • 从零学jquery之如何使用回调函数

    在类C语言中通常通过函数指针/引用的方式传递. jquery也提供类似的回调函数机制.但是如何正确传递回调函数仍然值得一提.  1.不带参数的回调 复制代码 代码如下: $.get('myhtmlpage.html', myCallBack); 其中myCallBack是函数名字.函数是javascript的基础.可以当作引用变量一样传递. 2.带参数的回调 很自然的,按照以往的经验,我们会认为带参数的回调是下面的样子: 复制代码 代码如下: $.get('myhtmlpage.html', m

  • jquery Deferred 快速解决异步回调的问题

    jquery Deferred 快速解决异步回调的问题 function ok(name){ var dfd = new $.Deferred(); callback:func(){ return dfd.resolve( response ); } return dfd.promise(); } $.when(ok(1),ok(2)).then(function(resp1,resp2){}) //相关API 分成3类 1类:$.when(pro1,pro1) 将多个 promise 对象以a

  • jQuery Ajax Post 回调函数不执行问题的解决方法

    今天在写一个检查用户名的功能时,使用的是jQuery.post( url, [data], [callback], [type] )这个函数,但是发现其中的回调函数不能执行. 先来看看我的代码: 前台代码: <script type="text/javascript"> function checkUser() { var user = $('#<%=txtUser.ClientID %>').val(); $.post('checkUser.ashx', {

随机推荐