js回调函数callback---简单理解并掌握使用回调函数

I_am_shy

已于 2024-06-07 14:55:55 修改

阅读量3.8k

点赞数 14

文章标签： javascript 前端开发语言

于 2024-03-05 14:14:57 首次发布

本文链接：https://blog.csdn.net/I_am_shy/article/details/136476455

版权

1.什么是回调函数callback()

/.......此处为网络查询所得

回调函数是一种特殊的函数，它作为参数传递给另一个函数，并在被调用函数执行完毕后被调用。

基本概念：

回调：指被传入到另一个函数的函数。
异步编程：指在代码执行时不会阻塞程序运行的方式。
事件驱动：指程序的执行是由外部事件触发而不是顺序执行的方式。

回调函数是一种常见的编程技术，它可以在异步操作完成后调用一个预定义的函数来处理结果。

......./

以上是对回调函数比较官方的解释，简单来说回调函数就是函数作为参数，满足一定条件才能执行的函数。

2.回调函数和普通函数的区别

从结构上来说，回调函数和普通函数完全一样

//函数构造方法
function FUN(){
    //代码...
}

也就是说回调函数并不是其他什么特殊结构，而是函数的一种用法，

3.函数的回调函数用法

以下是一个函数用例

// 函数作为参数，满足一定条件才能执行的函数
function funA(param) { 
    console.log(param);
}
function funB(param) { 
    setTimeout(function(){
        console.log(param)
    },1000)
}
funA("起床")
funB("洗漱")
funA("吃饭")

运行结果如下

可以看到这里有两个简单的函数，funA()和funB(),funB()中有一个定时器，它要过1秒后执行输出（异步函数），但是从实例使用上来说，我们希望的顺序是起床->洗漱->吃饭

所以这里需要先执行完异步的"洗漱"，再执行"吃饭"，所以我们可以将funA()执行回调函数用法，作为一个参数传入funB()中，等待funB()执行完毕再执行传入的参数funA()

// 函数作为参数，满足一定条件才能执行的函数
function funA(param) { 
    console.log(param);
}
function funB(param ,callback) { 
    setTimeout(function(){
        console.log(param)
        callback("吃饭")
    },1000)
}
// funA("起床")
// funB("洗漱")
// funA("吃饭")
funA("起床")
funB("洗漱",funA)

运行结果如下

4.浏览器中的回调示例

在浏览器的js叫脚本中，到处都是回调，如果你很熟悉dom操作，那你对回调的使用以及很了解了，比如最简单的按钮，

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>button</title>
</head>
<body>
  <div>
    <button id="bt">click</button>
  </div>
</body>
<script>
  const bt = document.getElementById('bt');
  bt.addEventListener('click', () => {
    let box = document.createElement("div");
    box.style.cssText = "width: 100px; height: 100px; background-color: red; margin: 10px; display: inline-block";
    document.body.appendChild(box);
    
  })
</script>
</html>

这里每次点击一次按钮就会触发一次回调，在页面上生成一个div，这个监听函数的条件就是，按钮触发了click点击事件，就执行一次回调函数，