<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>javascript回调函数</title>
</head>
<body>
1.认识函数
1.1.当被调用时可重复执行的代码块
1.2.函数也是一种数据
1.3.简单的函数
function functionName() {
//要执行的代码
};
//在函数外调用functionName函数,函数的一个特点,不调用不执行
functionName();
//传统方式需要多次调用时候,需要在每个需要调用的地方都写一遍执行代码:
// 地方1 需要五个心形
for (var i = 0; i <= 5; i++) {
document.write('♥');
};
// 地方2 需要五个心形
for (var i = 0; i <= 5; i++) {
document.write('♥');
};
// 地方3 需要五个心形
for (var i = 0; i <= 5; i++) {
document.write('♥');
};
/*传统实现方式的缺点:代码过剩*/
2.函数的功能
// 函数封装了一个功能,封装了功能的实现
// 简单函数封装
function printNum(){
for(var i =0; i<=5; i++){
if(i%2==0){
document.write('<p>♥</p>');
}
}
};
// 地方1
printNum();
// 地方2
printNum();
// 地方3
printNum();
//用函数的优点就是可以重复调用,减少代码量
</script>
<script>
3.函数的语法
//关键字:function
// 创建方式之一:函数声明的方式
function 函数名(){
函数体,封装实现的过程
};
// 创建方式二:函数表达式
var 函数名 = function(){
函数体,封装实现的过程
};
// 使用方式:
函数名();
// 注意:函数创建好之后,只有在函数被调用的时候才会执行函数内的程序
4.函数的参数
// 用户决定需求
// 函数参数
// 形参:在函数创建时,在()定义的标识符
function functionName(parameter1, parameter2,parameter3,...){
//函数体
};
var functionName = function(parameter1, parameter2,parameter3,...){
// 函数体
};
// 实参:在函数调用时,传入的实际数据
functionName(data1,data2,data3,...);
// 形参和实参的关系:函数在调用时,所传入的实参会赋值给形参,形参和实参的位置是一一对应的;
5.函数的返回值
// 若函数体内没有return,函数调用仅仅执行了函数体内的程序,而不会产生返回值
// 若需要用程序执行之后的结果进行计算,需要在函数体内把程序执行后的值返回到函数体外
function functionName(num1,num2){
var sum = num1 + num2;
return sum;
};
var result = functionName(1,2); //result = 3; 可以用result进行其他计算;
6.回调函数的基础
// 定义:回调函数被认为是一种高级函数,一种被作为参数传递给另一个函数的高级函数,回调函数会在另一个函数执行完之后在执行传进去的回调函数,回调函数的本质也是一种模式,所以也被称为回调模式,
// example1:
var friends = ['mike','stacy','andy','rick'];
friends.forEach(function(name,index){
console.log(index+'.'+name);
});
// example2:
var fn = function(callback){
callback();
};
fn(function(){
alert(1);
});
// example3:
function A(callback){
callback();
console.log('我是主函数');
};
// function B(){
// setTimeout("console.log('我是回调函数')",1000); //模仿延迟操作
// };
// A(B);
// 或者:
A(function B(){
setTimeout("console.log('我是回调函数')",1000);
});
// 我们让程序先去执行callback()回调函数,但输出结果是先输出主函数的内容在输出回调函数的内容,说明了主函数不需要等待回调函数执行完,再去执行主函数的程序,所以一般回调函数都会用在处理请求和处理需要耗时的程序时;
// 6.1回调函数是如何实现的?
//我们可以将一个函数作为实参传给另一个函数的形参,在另一个函数中调用这个函数,但是当我们把一个函数作为实参传递给另一个函数的时候,只是传递了这个函数的定义,并没有在参数中调用这个函数,当包含函数拥有了在参数中定义的回调函数后,他可以在任意时候调用回调函数;
</body>
</html>
