0

0

jQuery如何自定义一个回调函数

伊谢尔伦

伊谢尔伦

发布时间:2017-06-16 14:59:59

|

2455人浏览过

|

来源于php中文网

原创

首先从callback的字面翻译“回调” 可以理解这是一个函数被调用的机制

当我们遇到一个名词首先可能是百度谷歌搜索看官方是怎么解释的

下面是维基百科对回调的定义:

a callback is a piece of executable code that is passed as an argument to other code which is expected to call back (execute) the argument at some convenient time

硬翻译: 一个回调函数是作为另一个函数的参数的一个可执行的代码段 这个代码段在方便的时间来执行

通俗形象的解释: 把函数f2当做一个参数传给函数f1 并且在f1里适当的时间执行f2(下面的所有例子我都用f1,f2表示)

所以我们可以得到一个这样的回调函数模式

function f1(f2) {    //f1要执行的一些代码
    if (f2 && typeof(f2) === "function") { //对f2做判断是否存在并且是一个函数        f2();
    }
}

这里要注意两点 参数里的f2是一个指向f2这个函数的指针所以f2后面不能加括号

而f1内部的f2后面要有括号 因为这时我们要调用执行f2 ,所以要写f2()

我们把这个模式实例化看下他的执行结果

声明函数function f1(f2) {
alert("我是f1");if (f2 && typeof(f2) === "function") { //写上判断是个好习惯f2()
}
}
执行
f1(function() {
alert("我是f2");
})
结果://"我是f1",“我是f2”

我们看下整个函数执行的过程 当调用 f1(function(){alert("我是f2");})的时候

首先把一个匿名函数传给了f1() 而这个匿名函数就是声明函数里的参数f2 javascript程序是从上到下执行 先执行了alert("我是f1"); 然后执行了f2();

那我们可不可以这样写呢

overhang.js–jQuery顶部通知提示插件
overhang.js–jQuery顶部通知提示插件

overhang.js 是一款基于 jQuery 和 jQuery UI 的用于显示通知、确认、提示的插件,它以动画的方式从顶部滑出。overhang.js 提供了众多参数,你可以自定义通知的样式,回调函数也能够满足你的更多需求。

下载
function f1(f2) {    alert("我是f1");    if (f2 && typeof(f2) === "function") {  
        f2()
    }    alert("我又是f1 哈哈");
}
执行
f1(function(){
    alert("我是f2");
})//结果:我是f1 ,我是f2,我又是1 哈哈

再看对callback的定义 ,我们可以让callback在我们想要执行的时候执行,不影响f1本身的执行流

但为了封装和美观大多数我们会这样写

function f1(f2){ 
if (f2 && typeof(f2) === "function") {  
settimeOut(function(){f2()},1000) ;//f1执行1s后f2执行}
}function f2(){/**/}
f1(f2);

其实回调函数没那么复杂的,在js里面,function你可以当成一个普通的参数。只要后面加上(),就表示调用这个函数了。

再看看下面这个例子

$(function(){
    function funcname(param){
        //do something
         
        //callback
        param.callback();    
    }
 
    //调用
    funcname({
        callback:function(){
            alert('callback do'); 
        }   
    });      
});

从上面的例子也可以看出来,其实每定义一个函数,都将函数入容器的栈,index就是函数名。默认是在window下,因此可以把字符串丢过去,在window下也可以通过字符串调用到这个回调函数。

带参数的话,可以采用上面的方式。

比如jQuery里的一个例子

$("#div1").fadeOut("fast",functin(){
    $("#div2").fadeIn("slow");
})

让#div快速隐藏然后让#div2渐渐显示,在jQuery里有大量的callback函数

并且有一个专门的有一个方法callbacks来管理

jQuery.Callbacks = function( options ) {...}

最后我说下我最近在项目中用到的callback吧

hybrid app 功能大概就是 我向ios发送一个请求 ios返回给我的json数据 然后我将返回的数据解析插入到web页面上

//首先我写一个javascript和ios通信callback函数(简化)getData(callback){
settimeOut(function(){callback(iso_return)},100);
}//然后我向ios发送一个请求function getSinersReuest(){window.location.href="vvmusic://....callback=getSinersData"}/*然后ios截获url中的callback执行getData(getSinersData)返回给我数据;我的getSinersData是我想把ios返回的json插入到页面显示8*/getSinersData(iso_return){
.........
}//当页面加载的时候调用window.onload=function(){
getSinersReuest();
}

相关专题

更多
c++ 根号
c++ 根号

本专题整合了c++根号相关教程,阅读专题下面的文章了解更多详细内容。

22

2026.01.23

c++空格相关教程合集
c++空格相关教程合集

本专题整合了c++空格相关教程,阅读专题下面的文章了解更多详细内容。

24

2026.01.23

yy漫画官方登录入口地址合集
yy漫画官方登录入口地址合集

本专题整合了yy漫画入口相关合集,阅读专题下面的文章了解更多详细内容。

99

2026.01.23

漫蛙最新入口地址汇总2026
漫蛙最新入口地址汇总2026

本专题整合了漫蛙最新入口地址大全,阅读专题下面的文章了解更多详细内容。

132

2026.01.23

C++ 高级模板编程与元编程
C++ 高级模板编程与元编程

本专题深入讲解 C++ 中的高级模板编程与元编程技术,涵盖模板特化、SFINAE、模板递归、类型萃取、编译时常量与计算、C++17 的折叠表达式与变长模板参数等。通过多个实际示例,帮助开发者掌握 如何利用 C++ 模板机制编写高效、可扩展的通用代码,并提升代码的灵活性与性能。

15

2026.01.23

php远程文件教程合集
php远程文件教程合集

本专题整合了php远程文件相关教程,阅读专题下面的文章了解更多详细内容。

65

2026.01.22

PHP后端开发相关内容汇总
PHP后端开发相关内容汇总

本专题整合了PHP后端开发相关内容,阅读专题下面的文章了解更多详细内容。

61

2026.01.22

php会话教程合集
php会话教程合集

本专题整合了php会话教程相关合集,阅读专题下面的文章了解更多详细内容。

63

2026.01.22

宝塔PHP8.4相关教程汇总
宝塔PHP8.4相关教程汇总

本专题整合了宝塔PHP8.4相关教程,阅读专题下面的文章了解更多详细内容。

33

2026.01.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
jQuery 教程
jQuery 教程

共42课时 | 4.7万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 9.7万人学习

tp6+adminlte搭建通用后台
tp6+adminlte搭建通用后台

共39课时 | 5.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号