js中的回调函数

- 日理万妓 2023-02-23 08:27 104阅读 0赞

*  一个函数被作为参数传递给另一个函数（在这里我们把另一个函数叫做otherFucntion），回调函数在otherFunction中被调用

### 回调函数原理：  ###

假如你去商店买东西，刚好你要的东西商店没货，于是你在店员那里留下了你的电话号，过了几天 商店有货了，店员就打了你的电话，然后你接到电话就到店里去取货了，在这里例子中， 你的电话号就叫做回调函数，你把电话留给店员就叫登记回调函数，店里后来有货了叫做触发了回调关联的事件 店员给我打电话叫做调用回调函数，我去店里取货叫做响应回调事件

**js中的函数可以作为参数进行传递**

<button id="btn_1">回调函数1</button>
    <button id="btn_2">回调函数2</button>
    
    <script>
        //使用命名函数作为回调
        $("#btn_1").click(clickMe)
    
        function clickMe(){
                console.log(执行了回调函数1)
        }
    
        //这里的clickMe就是回调函数
        //使用匿名函数作为回调
        $("#btn_2").click(function(){
            console.log("执行了回调函数2")
    })
    
    </script>

页面执行之后：

![20200706155909209.png][]

### 执行回调函数的基本原理： ###

**传递参数给回调函数：**

**两种回调函数传参的方法**

**第一种： 将回调函数的参数作为回调函数同等级的参数进行传递**

//匿名函数作为回调函数
    var generalLastName = "Cliton";
    
        function getInput(options, callback) {
          var arr = [];
          arr.push(options);
          //将全局变量generalLastName传递给回调函数
          callback(generalLastName, arr);
        }
        getInput({
          name: "Rich",
          speciality: "Javascript"
        }, function (generalLastName, arr) {
          console.log(generalLastName + ":" + arr[0].speciality) // Cliton:Javascript
        });
    
    
    //命名函数作为回调函数
    var generalFirstName = "Eric";
    
        function gotInput(options, call) {
          var arr = [];
          arr.push(options);
          //将全局变量传递给回调函数
          call(generalFirstName, arr);
        }
    
        function calltest(generalFirstName, arr) {
          console.log(generalFirstName + ":" + arr[0].speciality) // Cliton:Javascript
        }
        gotInput({
          name: "rich",
          speciality: "Javascript"
        }, calltest)

![20200706160522583.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70][]

**第二种：回调函数的参数在调用回调函数内部创建 **

![20200706161257875.png][]

[20200706155909209.png]: https://img-blog.csdnimg.cn/20200706155909209.png
[20200706160522583.png]: https://img-blog.csdnimg.cn/20200706160522583.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200706161757143.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz,size_16,color_FFFFFF,t_70
[20200706161257875.png]: https://img-blog.csdnimg.cn/20200706161257875.png