js中回调函数的理解 举例说明js回调函数

初学js的时候,被回调函数搞得很晕,现在回过头来总结一下什么是回调函数。

  我们先来看看回调的英文定义:A callback is a function that is passed as an argument to another function and is executed after its parent function has completed。

  字面上的理解,回调函数就是一个参数,将这个函数作为参数传到另一个函数里面,当那个函数执行完之后,再执行传进去的这个函数。这个过程就叫做回调。

  其实也很好理解对吧,回调,回调,就是回头调用的意思。主函数的事先干完,回头再调用传进来的那个函数。但是以前看过很多博客,他们总是将回调函数解释的云里雾里,很高深的样子。

  举一个别人举过的例子:约会结束后你送你女朋友回家,离别时,你肯定会说:“到家了给我发条信息,我很担心你。” 对不,然后你女朋友回家以后还真给你发了条信息。小伙子,你有戏了。其实这就是一个回调的过程。你留了个参数函数(要求女朋友给你发条信息)给你女朋友,然后你女朋友回家,回家的动作是主函数。她必须先回到家以后,主函数执行完了,再执行传进去的函数,然后你就收到一条信息了。

  现在基本理解回调函数的意思了吧。不理解的话没关系,我们用代码说话。

//定义主函数,回调函数作为参数
function A(callback) {
    callback();  
    console.log('我是主函数');      
}

//定义回调函数
function B(){
    setTimeout("console.log('我是回调函数')", 3000);//模仿耗时操作  
}

//调用主函数,将函数B传进去
A(B);

//输出结果
我是主函数
我是回调函数

上面的代码中,我们先定义了主函数和回调函数,然后再去调用主函数,将回调函数传进去。

  定义主函数的时候,我们让代码先去执行callback()回调函数,但输出结果却是后输出回调函数的内容。这就说明了主函数不用等待回调函数执行完,可以接着执行自己的代码。所以一般回调函数都用在耗时操作上面。比如ajax请求,比如处理文件等。


在 Vue ,可以使用回调函数来处理异步操作。以下是一个示例,演示了如何在 Vue 组件使用回调函数处理异步操作: ```vue <template> <div> <button @click="fetchData">Fetch Data</button> </div> </template> <script> export default { methods: { fetchData() { // 模拟异步操作 setTimeout(() => { const data = 'Data fetched successfully'; this.handleData(null, data); // 调用回调函数,并传递结果和错误对象 }, 2000); }, handleData(error, data) { if (error) { console.error(error); } else { console.log(data); } }, }, }; </script> ``` 在上述例子,点击按钮会触发 `fetchData` 方法,该方法模拟了一个异步操作。在异步操作完成后,通过调用 `handleData` 方法来处理结果和错误。 在 `fetchData` 方法使用 `setTimeout` 来模拟异步操作的延迟。在异步操作完成后,调用了 `this.handleData` 方法,并将结果和错误对象作为参数传递给回调函数。 `handleData` 方法是一个普通的方法,用于处理异步操作的结果。在该方法,可以根据错误对象是否为空来判断是否发生了错误,并进行相应的处理。 通过使用回调函数来处理异步操作,可以将异步逻辑和处理逻辑分离,提高代码的可维护性和复用性。无论是在 Vue 组件还是在其他 JavaScript 环境回调函数都是一种常见的处理异步操作的方式。然而,回调函数可能导致回调地狱的问题,使代码难以理解和维护。在复杂的异步场景,可以考虑使用 Promise、async/await 或其他更现代的异步处理方式。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值