js回调函数

1、当一个函数的形参需要接收另一个函数数据时，那该形参中的函数称为回调函数。

argu为形参变量用来接收数据

数据类型：number、string、null、undefinned、object

fn(123);
fn("123456");
fn(document.getElementById('box1'));
//函数匿名传递给形参
fn(function (){} )    //argu = function(){}
//命名函数，将函数名传递给形参
function fn1(){}   //var fn1 = function(){}
fn(fn1);   //argu = fn1 = function(){0}

2、函数形参的命名规范 ： callback

function fnn(callback){
    callback();     //运行传入的回调函数
}

3、回调函数的应用实例

定义一个函数返回两个数的和

function sum(a,b){
    return a + b;
}

//两个数的差    return  a - b

定义运算函数 （分离：不变 变得部分分离）

function operate(a,b,callback){
    if(isNaN(a + b)){
        alert("请输入正确的格式");
        return 0;
    }
    return callback(a,b)    //a1 = a; b1 = b
}
//加法
var res = operate(2,3,function(a1,b1){
    return a1 + b1
})
console.log(res)

//减法    return a1 - b1

4、回调函数具备的特征

   4-1  内部有大片公共流程执行要求

   4-2   动态切换  调用

应用展示

  utils.js

function operate(a,b,callback){
    if(isNaN(a + b)){
        alert("请输入数字")；
        return 0
    }
    return callback(+a , +b)
}

<input type="text" placeholder="第一个数" id="in1">
<input type="text" placeholder="第二个数" id="in2">

<button id="btn1">加法</button>
<button id="btn2">减法</button>

<script src="utils.js"></script>

<script>
     //加法的运算过程
    document.getElementById('btn1').onclick = function(){
        var in1 = document.getElementById('in1').value;
        var in2 = document.getElementById('in2').value;
        var res = operate(in1,in2,function(a,b){
            return a + b;
        })

        alert(res);
    }
    
    //减法运算    return a - b
</script>    

5、常见系统提供的回调方法

5-1 arr.map 生成新的数组，这里必须要有return

var arr = [1,3,5,7,9]
var newArr = arr.map(function(item,index){
    return item * 2
})

5-2 arr.forEach 单纯的遍历数组方法 , 不要用return，否则语句无效返回

var newArr = arr.forEach(function(item,index){
    //如果用return
    return item * 2
})
console.log(newArr);    //return语句无效 返回undefined

5-3 arr.filter 数组过滤器，按照条件返回新数组

var arr = [1,2,4,6,7,9,68]
var newArr = arr.filter(function(item,index){
    return item > 2;    //返回大于2的值
    return item % 2 == 0;  //返回所有的偶数
})
console.log(arr,newArr)

6、字符串中带有的回调方法 replace

function myReplzce(str,target,callback){
    //target 在str中的下标位置
    var index = str.indexOf(target);
    //替换结果 ”“
    var res = "";
    if(index != -1){
        //目标存在
        var res = callback()
    }
    //返回替换的结果
    var newArr = "";
    var perStr = str.sunstring(0,index);
var nexStr = str.substring(index + target.length,str.length)
	newStr = perStr + res + nexStr;
    return newStr;
}

7、定义一个可以扩展的冒泡排序函数，实现自动控制升序、降序

function bubbleSort(arr,callback){
    for(var i = 0; i < arr.length - 1; i++){
        for(var j = 0; j < arr.length - i - 1; j++){
            if(callback(arr[j],arr[j+1]) > 0){
                var temp = arr[j + 1];
                arr[j + 1] = arr[j];
                arr[j]  =  temp;
            }
        }
    }
}
var arr = [1,6,2,8,3,45,4,67,7]
bubbleSort(arr,function(a,b){   // a = arr[j]  b = arr[j +1]
    return a - b
})
console.log(arr);
bubbleSort(arr,function(a1,b1){ //a1 = arr[j] b1 = arr[j +1]
    return b1 - a1
})
console.log(arr);


arr[j] - arr[j + 1]   //升序
arr[j + 1] - arr[j]   //降序

8、延迟器：setTimeout(callback,time),会在time时间后，调用

 setTimeout(function(){
        alert("就啊哈哈哈")
    }, 1000);   //一秒后调用

 //先打印 1、3，然后在打印 2
    console.log("1")
    setTimeout(function(){
        console.log("2")
    }, 0);
    console.log("3")

9、setInterval(callback,time)

9-1 按照time的时间间隔，重复调用callback 中的代码

9-2 也是等其他流程走完，才开始执行

9-3 利用该返回值，可以停止定时器

var count = 0;
    console.log("定时器之前");
    var res = setInterval(function () {  //2
        count++;
        console.log(count)
        if(count >= 5){
            clearInterval(res)   //停止计时器
        }
    }, 1000)
    console.log("定时器之后");

//  定时器之前   定时器之后  (先执行)
//   在开始计数