简单聊聊回调函数(callback)函数的理解和应用场景_回调函数mutipledatacirclecallback的用法-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_52940025/article/details/125800606

回调函数是JavaScript中处理异步操作的一种常见方式。它允许我们将一个函数作为参数传递给另一个函数，在内部函数执行完毕后调用，从而实现同步处理异步任务。相比于普通函数写法，回调函数使得代码更简洁，避免了定义多个一次性函数。在示例中，回调函数用于在模拟异步请求完成后执行特定操作，如在点击事件中获取并处理返回值。回调函数常见于事件处理、异步编程和模块化代码中，提高代码复用性和组织性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

回调函数

1、前置知识

js的函数中有一个返回值可以拿到一个函数的结果。当我们想要取得这个函数的结果，在另一个函数中调用它，那么调用的这个函数就叫回调函数

2、回调函数和普通写法对比

当一个异步请求结果执行完才开始执行函数

    //普通函数写法

    function myName(name){
        //以定时器模拟请求
       setTimeout(
        ()=>{
            age(name)
        },1000
       )
    }

    // 定义请求执行完后的行为
    function age(name){
        console.log(name+'今天18岁了');
    }

    // 调用这个函数
    myName('小明')

这种写法看起来也可以实现，但我们也可以实现在一个函数中定义

   //callback函数
    // callback为异步请求执行完后执行的代码
    function myName(callback,name){
        //以定时器模拟请求
       setTimeout(
        ()=>{
            callback(name)
        },1000
       )
    }

    // 调用，并传入一个参数
    myName((name)=>{
        console.log(name+'今天18岁了');
    },'小明')

在示例中，我们看到我们利用callback拿到了setTimeout函数返回给的myName函数，并在其他函数中调用了。

3、思考callback函数能做些什么呢？

callback函数能使我们的代码更加简洁，不用定义多个单次使用的函数。
callback函数可以拿到内部函数返回值
callback函数可以对异步函数进行简单的同步处理
callback可以对一个函数的内部操作进行多次操作，而不用重复定义

4、常用的应用场景列举

  //html部分
  <div id="box">
        盒子
    </div>

//js部分

    <script>
var box = document.getElementById('box');

// 给盒子添加点击事件，点击事件会返回一个值.
//这个时候return拿不到里面点击事件的值.
//通过回调函数我们可以拿到这个值.
//并在其他函数中调用他，并多次调用.
function addBoxClick(cb){
    box.addEventListener('click',()=>{
        cb('小明')
    })
}


addBoxClick((name)=>{
console.log(name);
})
    </script>