JavaScript-回调函数

来源：互联网发布：韩顺平java视频有用吗编辑：程序博客网时间：2024/05/18 03:52

一、什么是回调函数？

在C++中，回调函数指一个通过函数指针调用的函数，函数的指针（地址）作为参数传递给另一个函数，当这个指针被用来调用它所指向的函数时，我们就称这是回调函数。

在WINDOWS中，比较常用的是：程序员想让DLL程序中的函数调用自己编写的一个方法，于是利用DLL中回调函数(CALLBACK)的接口来编写程序，使自己写的方法被调用，这个就称为回调。

在JavaScript中，假设有函数A和B两个函数，A中的代码可自定义，B为被封装的函数，函数B的定义如下所示：function B(fn1){...}，通过执行B(A)，可在函数B内调用函数A，实现函数A的功能，函数A即为回调函数。

二、JavaScript中回调函数例子

例子主要实现功能：用户输入用户名、密码，点击登录，获取用户名和密码信息。实验平台：WebStorm 8.0.4.

2.1 html 内容

html代码：

<body><label>用户名：</label><input type="text"><label>密码：</label><input type="text"><button id="logBtn">登录</button></body>

网页效果：

Javascript-回调函数 - 我是大小鱼O(∩_∩)O - 诺亚方舟

2.2 不传参数的回调

<script type="text/javascript">        window.onload = function () {            //定义正确的输入名与密码            var json = {name: "fang", passport: "123"};           //获取登录按钮变量            var logBtn = document.getElementById("logBtn");            /**********不传参数的回调**********************************/            //登录按钮的单击事件：            logBtn.onclick = function () {                //获取input标签变量                var input = document.getElementsByTagName('input');                //比较奇怪：在webstorm中input[0]可行，在sublime中input[0]不可行，必须input['0'];                var lgjson = {name: input[0].value, passport: input[1].value};                // 假设login为被封装的函数（可存到js文档中），相当于上文所指的函数B                function login(data, fn1, fn2) {
                //判断用户名与密码是否都正确                    if (data.name == json.name && data.passport == json.passport) {                        //不能忘记fn1、fn2后面的"()"。                        fn1();                    }                    else {                        fn2();                    }                }                // 调用函数login(),login的参数为匿名函数function (){},通过fn1，fn2传入login函数。
                //此处的匿名函数相当于上文的函数A。                login(lgjson, function () {                            document.write("登录成功！")                        },                        function () {                            document.write("登录失败！")                        });            };            /**********不传参数的回调**********************************/                   }
</script>

测试结果：

输入密码不正确时：

Javascript-回调函数 - 我是大小鱼O(∩_∩)O - 诺亚方舟

输入密码正确时：

Javascript-回调函数 - 我是大小鱼O(∩_∩)O - 诺亚方舟

2.3 不传参数的回调

注意：此时login函数(函数B)的形参仍为fn1，fn2，不带参数。

//传参数的回调：
            logBtn.onclick = function () {                var input = document.getElementsByTagName("input");                var logjson = {name: input[0].value, passport: input[1].value};                //注意：此时的形参仍为fn1，fn2，不带参数                function login(data, fn1, fn2) {                             if (data.name == json.name && data.passport == json.passport) {                        fn1(data.name);                    }                    else {                        fn2(data.name);                    }                }                login(logjson, function (name) {                            alert(name + "登录成功！")                        }, function (name) {                            alert(name + "登录失败,请重新登录!")                        }                );            }

测试结果：

输入密码错误时：

Javascript-回调函数 - 我是大小鱼O(∩_∩)O - 诺亚方舟

输入密码正确时：

Javascript-回调函数 - 我是大小鱼O(∩_∩)O - 诺亚方舟

0 0