js中的回调函数-蒲公英云

js中的回调函数

- 日理万妓 2023-02-23 08:27 211阅读 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>

页面执行之后：

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

传递参数给回调函数：

两种回调函数传参的方法

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

//匿名函数作为回调函数
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)

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70

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

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