1、回调函数:函数callback以参数形式传给另一函数的，那么函数callback就叫回调函数。
2、为什么需要回调函数？
灵活！！
也许有人有疑问了:一定要以参数形式传过去吗，我不可以直接在函数main里面调用函数callback吗？
可以。但：
如果你直接在函数main里调用的话，那么这个回调函数就被限制死了。但是使用函数做参数就有下面的好处：当你main(callback1)的时候函数callback1就成了回调函数，而你还可以main(callback2)这个时候，函数callback2就成了回调函数。如果你写成了function main(){...;callback1();}就失去了变量的灵活性。
例如：
<html>
<head>
<title>回调函数(callback)</title>
<script language="javascript" type="text/javascript">
function main(callback)
{
alert("我是parent函数main！");
alert("调用回调函数");
callback();
}
function <span style="color: rgb(102, 102, 102); font-family: 宋体, 'Arial Narrow', arial, serif;font-size:18px; line-height: 28px;">callback1</span>(){
alert("我是回调函数<span style="color: rgb(102, 102, 102); font-family: 宋体, 'Arial Narrow', arial, serif;font-size:18px; line-height: 28px;">callback1</span>");
}
function <span style="color: rgb(102, 102, 102); font-family: 宋体, 'Arial Narrow', arial, serif;font-size:18px; line-height: 28px;">callback2</span>(){
alert("我是回调函数<span style="color: rgb(102, 102, 102); font-family: 宋体, 'Arial Narrow', arial, serif;font-size:18px; line-height: 28px;">callback2</span>");
}
function test()
{
main(<span style="color: rgb(102, 102, 102); font-family: 宋体, 'Arial Narrow', arial, serif;font-size:18px; line-height: 28px;">callback1</span>);
main(<span style="color: rgb(102, 102, 102); font-family: 宋体, 'Arial Narrow', arial, serif;font-size:18px; line-height: 28px;">callback2</span>);
}
</script>
</head>
<body>
<h1>学习js回调函数</h1>
<button onClick=test()>click me</button>
<p>应该能看到调用了两个回调函数</p>
</body>
</html>
![Vue3 中 watch 与 watchEffect 有什么区别？[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)