javascript 回调函数

最新推荐文章于 2024-02-14 00:00:00 发布

信行合一

最新推荐文章于 2024-02-14 00:00:00 发布

阅读量1.3k

点赞数

分类专栏： 11_js 文章标签： javascript

本文链接：https://blog.csdn.net/tengdazhang770960436/article/details/52170196

版权

11_js 专栏收录该内容

98 篇文章 0 订阅

订阅专栏

含义：
回调基本原理跟好莱坞原则一样，Don’t call me,I’ll call you。
编程上来说，一般使用一个库或类时，是你主动调用人家的API，这个叫Call，有的时候这样不能满足需要，需要你注册你自己的程序（比如一个对象)，然后让人家在合适的时候来调用你，这叫Callback。设计模式中的Observer就是例子。基于事件的编程方式，那些事件的处理程序都是被调用的方法，都可成为回调(Callback)方法。

回调函数就是把一个方法b/c，当做另一个方法的main的参数传进去，在某一个时刻，方法b/c会被方法main调用执行。

举例:1 不带参数的回调函数

<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
    <script type="text/javascript">
       function main(callback) {
           alert("I am main function");
           alert("Invoke callback function");
           callback();
       }

        function b() {
            alert("I am b function");
        }

        function c() {
            alert("I am c function");
        }

        function test() {
            main(b);
            main(c);
        }
    </script>

<button onclick="test()">click me</button>
</body>
</html>

举例:2 带参数的回调函数

<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
    <script type="text/javascript">
       function main(p1,p2,callback) {
           alert("I am main function");
           alert("Invoke callback function");
           callback((p1+p2));
       }

        function b(data) {
            alert("I am b function param is : " + data);
        }

        function c(data) {
            alert("I am c function param is : " + data);
        }

    </script>

<button onclick="main(1,5,b)">click me b</button>
<button onclick="main(1,6,c)">click me c</button>
</body>
</html>

3.常见的回到函数

<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>

<button id="btn_1">click me</button>
<script type="text/javascript">
    // jquery 中的回调函数
    $("#btn_1").click(function() {
        alert("Btn 1 Clicked");
    });
    // javascript 回调函数
    var friends = ["Mike", "Stacy", "Andy", "Rick"];
    friends.forEach(function (eachName, index){
        console.log(index + 1 + ". " + eachName); // 1. Mike, 2. Stacy, 3. Andy, 4. Rick
    });
</script>
</body>
</html>

4.回调函数的实际应用举例

<html>
<head>
    <meta charset="utf-8">
</head>
<body>

<input type="text" id='score'/>
<button onclick="testCallBack('score',punish)">测试回调函数</button>

<script type="text/javascript">
    function testCallBack(id, callBack) {
        var score = getValue(id);
        if(score > 60) {
            alert("考试通过可以回家了!");
        } else {
            // 执行之前确保回调函数是函数
            if(typeof callBack ==="function") {
                callBack(score);
            } else {
                alert("请传入函数作为参数！")
            }
        }
    }

    /**
     * 获取指定 id input 值
     * @param id
     */
    function getValue(id) {
        return document.getElementById(id).value;
    }

    /**
     * 处理不及格的人的方式
     * @param score
     */
    function punish(score) {
        if(score > 50) {
            alert("把考试内容抄写一遍！")
        } else if(score > 40) {
            alert("把考试内容抄写两边遍！")
        } else {
            alert("叫家长！")
        }
    }


</script>

</body>
</html>