回调函数

JavaScript学习 本文总阅读量次

回调函数

  • 回调函数就是一个参数，将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数。这个过程就叫做回调。
  • 注意：调用回调函数时是不需要()的，直接使用函数名！
  • 例子：下面reduce()方法的第一个参数就是回调函数。

回调函数与调用普通函数的区别

  1. 性能没有区别。
  2. 回调函数是作为参数传递的,操作更加灵活。
    比如，你定义了函数a，b，c,那么使用回调函数时不用修改 a 的代码就可以让 a 调用 c、d、e….
    当你调用普通函数的时候不修改代码只能在函数a内运行函数b，就失去了变量的灵活性。

补充：数组的reduce()方法

  • reduce()方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。即，对数组每个元素执行回调函数，返回值用于下一次计算参数
  • reduce()方法的参数由回调函数和一个初始值参数组成。
  • 语法：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
  • 语法理解：reduce(function(回调返回的值,数组当前元素,当前元素序号值,调用reduce的数组) , 回调函数第一个参数的初始值);
  • 返回值：返回计算结果
    参数及描述
  • 例子：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <body>

    <p>点击按钮计算数组元素相加后的总和。</p>
    <button onclick="myFunction()">点我</button>

    <p>数组元素总和: <span id="demo"></span></p>

    <script>
    var numbers = [65, 44, 12, 4];

    function getSum(total, num) {
        return total + num;
    }
    function myFunction(item) {
        document.getElementById("demo").innerHTML = numbers.reduce(getSum,0);
    }
    </script>

    </body>
    运行结果

同步回调与异步回调

其实回调函数并不一定是同步/异步的，主要看我们的函数是否支持异步处理，一旦支持我们就当做异步回调来看。

同步回调

1
2
3
4
5
6
7
8
9
10
11
var callback = function(arg3) {
    console.log('callback Totle is:' + arg3)
  }

function fn(arg1, arg2, cb) {
  var Total = arg1 + arg2;
  cb(Total);
  console.log('mainFunction Totle is:' + Total)
}

fn(2, 2, callback)   // 调用fn()函数，并传入2, 2, callback作为参数

执行结果为：

1
2
callback Totle is:4
mainFunction Totle is:4

异步回调

js中的例子

1
2
3
4
5
6
7
8
9
10
11
12
function f2() {

    console.log('f2 finished') 
}

function f1(cb) {

    setTimeout(cb,1000)        //用setTimeout()模拟耗时操作
    console.log('f1 finished')
}

f1(f2);    //得到的结果是 f1 finished ，f2 finished
  • js中的setTimeout()函数支持异步处理。
  • 所以我们可以用setTimeout()来模拟耗时操作。得到的结果是：
    1
    2
    f1 finished 
    f2 finished

nodejs中的例子

1
2
3
4
5
6
7
8
var fs = require("fs");

fs.readFile('input.txt','utf-8', function (err, data) {
    if (err) return console.error(err);
    console.log(data.toString());
});

console.log("程序执行结束!");

执行的结果是:

1
2
3
$ node app
程序执行结束!
我们来测试一下异步回调函数
  • 上面例子中我们先创建了一个文件input.txt，里面的内容是:’我们来测试一下异步回调函数’
  • 首先我们要明确，node中fs.readFile()读取文件内容是异步的。
  • 因此程序执行到这儿的时候并不会阻塞，而是继续向后执行，当文件读取完毕之后再自动调用传入的匿名回调函数，因此出现了上面的结果。
JavaScript学习