函数这章,回调函数不讲解一下吗?

函数这章,回调函数不讲解一下吗?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var a = 0
  
function bb(x) {
    console.log(x)
}
  
function timer(time) {
    setTimeout(function () {
        a=6
    }, time);
}
  
console.log(a)
timer(3000)
bb(a)
</script>
</body>
</html>

网上看到的一个问题,上面按逻辑上来说应该是输出0和6,但实际上却输出是0和0;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var a = 0
  
function bb(x) {
    console.log(x)
}
  
function timer(time, callback) {
    setTimeout(function () {
        a = 6
        callback(a);
    }, time);
}
  
//调用:
console.log(a)
timer(3000,bb)
</script>
</body>
</html>

加了callback这个关键字后就正常输出0和6了


之前看老师的一个解释,但还是不太懂

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

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

以下是老师给同学写的一个回调函数的例子:

http://img1.sycdn.imooc.com//climg/5c98ad630001920910650631.jpg

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

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

祝学习愉快!


  • 菜鸟x 提问者 #1
    哦,懂了。谢谢老师的解答!
    2019-03-25 21:12:48
好帮手慕星星 2019-03-25 11:20:02

你好,这是因为定时器是异步执行的原因,会等全部的代码执行完毕之后,再去执行定时器中的内容,所以第一段代码输出的结果是0,0,是因为定时器还没有执行呢。举个例子可以看一下:
http://img1.sycdn.imooc.com//climg/5c98487c0001d94103860147.jpg

按照代码的执行顺序应该是1,2,3,可结果是:

http://img1.sycdn.imooc.com//climg/5c98489b000113d901460088.jpg

可以说明定时器异步执行,也就是最后执行的。

而第二段代码,是将bb函数中传入了定时器中,也就是在定时器里面执行的,等a变量值改变之后执行,所以最后输出的值就是6了。

祝学习愉快!

  • 提问者 菜鸟x #1
    ( ╯□╰ )其实我想问的是回调函数是什么和它的作用是什么,并不是想问上面的问题
    2019-03-25 15:38:23
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
组件化思想开发电商网页 18版
  • 参与学习           人
  • 提交作业       467    份
  • 解答问题       4826    个

本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识,不仅如此,还会学习如何利用组件化的思想来开发网页,知识点+案例,使得所学可以更好的得到实践。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师