js中的回调函数，callback的意思

最新推荐文章于 2022-07-13 18:11:51 发布

newbroenheanven

最新推荐文章于 2022-07-13 18:11:51 发布

阅读量598

点赞数 1

分类专栏： node.js的学习之路文章标签： node.js

本文链接：https://blog.csdn.net/weixin_43994886/article/details/106577202

版权

node.js的学习之路专栏收录该内容

10 篇文章 0 订阅

订阅专栏

回调函数起源是一个问题，问题就是想得到一个异步的结果。

问题的产生代码：

function fn(){
  setTimeout(function(){
    var data = 'hello'
  },1000)
}

fn()

上面的代码有个需求，如何调用fn，可以得到内部的data？

如果不明白setTimeout先了解一下前备知识setTimeout，setTimeout( ) ，其实就是一个延时方法，这边用setTimeout充当一个异步函数。了解一下用法：

<html>
    <body bgcolor=lightcyan text=red>
        <h1>
            <font color=blue>示范网页</font>
        </h1>
        <p>
        </br>
        <p> 请等三秒!
        <script>
            setTimeout("alert('对不起, 要你久候')", 3000 )
        </script>
    </body>
</html>

setTimeOut的功能可以看懂以后
回到问题本身

function fn(){
  setTimeout(function(){
    var data = 'hello'
  },1000)
}

fn()

上面的代码有个需求，如何调用fn，可以得到内部的data？

也许会有这种错误想法看看是否可行：

function fn(){
  var data = ''
  setTimeout(function(){
    var data = 'hello'
  },1000)
  return data 
}

console.log(fn())

看一下结果：在这里插入图片描述
执行之后啥也没有，因为我们上面定义的是data=’ '是个空的字符串。里面的return没有作用，（即便有作用也是返回给异步函数）这样不够直观

function fn(){
  var data = '默认数据'
  setTimeout(function(){
    var data = 'hello'
  },1000)
  return data 
}

console.log(fn())

看一下结果：在这里插入图片描述
看到了console.log(fn())的结果是’默认数据’，也就是我们赋给异步函数外data的值，并不受异步函数里面的赋值影响。

这里的fn()不受异步函数的影响，没有等异步函数执行，就已经打印出了data的值。还是回到问题本身，到底怎么才能等异步函数执行完了再return想要的结果？
（这里很啰嗦，因为我自己一直没搞懂啥事异步函数，后来才知回调是为了解决上述问题的）

这里为了解决这个问题，这里介绍回调函数来获取结果，也必须通过回调函数，没有别的方式

因为函数也是一种数据类型，他也是可以作为参数传递的,这里介绍回调函数callback，callback本身是个单词，这里也是一个形参而已，这是google对callback函数的定义

A callback is a function that is passed as an argument to another
function and is executed after its parent function has completed.

function fn(callback){
  var data = '默认数据'
  setTimeout(function(){
    var data = 'hello`在这里插入代码片`'
    callback(data)
  },1000)
  // return data 
}

这里往fn函数里面传递了一个参数，因为函数也可以当作参数嘛，我们传入这个参数是为了拿到异步操作的结果，比如这里的callback可以理解为：

var callback =  function callback(data){
console.log(data)
}

这样子，我们就拿到了异步函数的结果data，callback这时候拿到的结果变成了fn()的参数。我们这时候尝试输出data

function fn(callback){
  var data = '默认数据'
  setTimeout(function(){
    var data = 'hello'
    callback(data)
  },1000)
  // return data 
}
 fn(function(data){
 console.log(data)
 })

注意这里的

function(data){
 console.log(data)
 }

就是我们上面的callback，这就是跟平时不太一样的地方！！平时我们的函数是先定义，再调用
而这里是callback作为形参，先拿到异步函数的结果，然后别人想调用这个结果的时候，再把callback的返回值当成参数，来定义函数怎么用，所以是先调用后定义比如

function(data){
 console.log(data+‘zeid‘)
 }

在这里插入图片描述
是不是就成功把data = hello 用上了再也不会跳过异步函数了！！

整体代码是

function fn(callback){
  var data = '默认数据'
  setTimeout(function(){
    var data = 'hello'
    callback(data)
  },1000)
  // return data 
}
 fn(function(data){
 console.log(data+' zeid')
 })

再也不会输出’默认数据‘，而是输出hello zeid，说白了callback就是个形参
如果我们定义回调函数是

function(data){
 console.log(data+' zeid')
 }

那么callback就可以理解成

var callback =  function callback(data){
console.log(data+’zeid‘)

callback怎么处理异步的返回值，其实是由调用这个结果的人设计的！
还是，先调用，再定义的意思，为什么会有这种操作，因为js中有些函数是延时的，但是我们又需要这个返回值，才能执行操作，那就要靠回调函数了拉，当然上面的settimeout中的1000毫秒=1秒这一秒是肯定需要等的~也就是等到了异步的结果，通过回调函数拿到返回值了，再继续操作。

newbroenheanven

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js中的回调函数，callback的意思

回调函数起源是一个问题，问题就是想得到一个异步的结果。关于回调函数的封装，如何封装一个异步的API，问题的产生代码：function fn(){ setTimeout(function(){ var data = 'hello' },1000)}fn()上面的代码有个需求，如何调用fn，可以得到内部的data？如果不明白setTimeout先了解一下前备知识setTimeout，setTimeout( ) 是属于 window 的方法, 但我们都是略去 window 这顶层
复制链接

扫一扫

专栏目录