回调函数指的是被调用者完成处理后自动回调调用者预先传递的函数。
在类C语言中通常通过函数指针/引用的方式传递。
jQuery也提供类似的回调函数机制。但是如何正确传递回调函数仍然值得一提。
在John(jQuery Founder)写的指南中有详细的介绍。
1、不带参数的回调
$.get('myhtmlpage.html', myCallBack);
其中myCallBack是函数名字。函数是javascript的基础。可以当作引用变量一样传递。
2、带参数的回调
很自然的,按照以往的经验,我们会认为带参数的回调是下面的样子:
$.get('myhtmlpage.html', myCallBack(param1, param2));
但这样将不能正常工作。myCallBack(param1, param2)会在调用这个语句的时候就被执行,而不是在之后。
下面的语法才是正确的:
$.get('myhtmlpage.html', function(){ myCallBack(param1, param2); });
这样回调函数被作为函数指针传递,将在get操作执行完成后被执行。
程序演示:
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>回调函数</title> 7 <script src="jquery/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script> 8 <script type="text/javascript"> 9 $(document).ready(function(){ 10 $("#btn1").click(function(){ 11 $("#test1").text(function(i,origText){ 12 return "Old text:"+origText+"new text:hello world!(index:"+i+")"; 13 }); 14 }); 15 $("#btn2").click(function(){ 16 $("#test2").html(function(i,origText){ 17 return "Old html:"+origText+"new html:hello <b>world!</b>(index:"+i+")"; 18 }); 19 }); 20 }); 21 </script> 22 </head> 23 <body> 24 <p id="test1">这是<b>粗体</b>文本。</p> 25 <p id="test2">这是另一段<b>粗体</b>文本。</p> 26 <button id="btn1">显示旧/新文本</button> 27 <button id="btn2">显示旧/新 HTML</button> 28 </body> 29 30 </html>