回调函数

  • 1、概述
  • 2、函数执行顺序
  • 2.1、顺序的控制
  • 2.2、 回调函数
  • 3、总结


1、概述

大家好,我是欧阳方超。
今天说说JS中的回调函数。先看一下回调函数(callback)的概念,回调函数是作为参数传递给另个一个函数的函数,定义简单明了,但是也描述了回调函数的特点:它本身是函数、它要作为参数传给其他函数。

2、函数执行顺序

我们先说这样一个事实,JavaScript中函数是按照调用顺序执行,而非定义顺序。这一点很好理解。

2.1、顺序的控制

下面定义了两个函数,逐个调用,完成打印两个数之和的任务:

function showResult(result) {
          console.log(result);
      }
      function calculator(m, n) {
          let result = m + n;
          return result;
      }

      let result = calculator(1, 3);
      showResult(result);

如果想通过只调用calculator()函数就能实现打印出两数之和的结果,这种在执行完一段代码后再执行另一端代码(计算完两个之和再打印其结果)的场景就可以引入回调函数。

2.2、 回调函数

如下代码,为calculator()函数多提供一个参数,该参数接收一个函数,在calculator()函数内部调用传入的函数,在调用calculator()函数时传入一个函数名(注意是函数名,在实际执行时才会根据函数名找到函数),此函数已定义过。

function showResult(result) {
          console.log(result);
      }
      function calculator(m, n, callback) {
          debugger;
          let sum = m + n;
          callback(sum);
      }
      calculator(1, 3, showResult);

此时,showResult()函数就是回调函数,他的执行时机是某些任务执行完毕后,在这里是计算完两个数之和后,立即调用回调函数。
总结一下,回调确保了一个任务执行完毕前不会去执行一个函数而在这个任务执行完毕后会立即执行某个函数。

3、总结

简要介绍了回调函数的概念,并用代码展示了回调函数的用法。当然这只是回调函数的简单介绍,回调函数真正的用法并没有涉及,先掌握基础的为后续做好铺垫吧。
我是欧阳方超,把事情做好了自然就有兴趣了,如果你喜欢我的文章,欢迎点赞、转发、评论加关注。