javascript中的回调函数

更新日期: 2020-12-16阅读: 1.6k标签: 函数

回调函数是每个 JS 开发人员都应该知道的概念之一。 回调用于数组,计时器函数,promise,事件处理程序等中。


1.回调函数

我们编写一个问候的函数,首先创建一个函数greet(name),该函数返回欢迎消息:

function greet(name) {
  return `Hello, ${name}!`;
}

greet('fly63'); // => 'Hello, fly63!'

如果要向一些人问候怎么做?这里,我们可以使用 array.map() 方法:

const persons = ['fly63', '王大冶']
const messages = persons.map(greet)

messages // ["Hello, fly63!", "Hello, 王大冶!"]

persons.map(greet)接受person数组的每一项,并使用每一项作为调用参数来调用函数greet():greet('fly63'),greet('王大冶')。

有趣的是persons.map(greet)方法接受greet()函数作为参数。 这样做会使reet()成为回调函数。

persons.map(greet)是一个接受另一个函数作为参数的函数,因此将其命名为高阶函数

高阶函数承担调用回调函数的全部责任,并为其提供正确的参数。

在前面的示例中,高阶函数persons.map(greet)负责调用greet()回调函数,并将数组的每个项目作为参数:'fly63'和'王大冶'。

我们可以可以自己编写使用回调的高阶函数。例如,这里有一个等价的array.map()方法

function map(array, callback) {
  const mappedArray = [];
  for (const item of array) { 
    mappedArray.push(
      callback(item)
    );
  }
  return mappedArray;
}

function greet(name) {
  return `Hello, ${name}!`;
}

const persons = ['fly63', '王大冶']

const messages = map(persons, greet);

messages // ["Hello, fly63!", "Hello, 王大冶!"]

map(array, callback)是一个高阶函数,因为它接受回调函数作为参数,然后在它的函数体内部调用回调函数:callback(item)。


2.同步回调

回调的调用方式有两种:同步和异步回调。

同步回调是在使用回调的高阶函数执行期间执行的。

换句话说,同步回调处于阻塞状态:高阶函数要等到回调完成执行后才能完成其执行。

function map(array, callback) {
  console.log('map() 开始');
  const mappedArray = [];
  for (const item of array) { mappedArray.push(callback(item)) }
  console.log('map() 完成');
  return mappedArray;
}

function greet(name) {
  console.log('greet() 被调用 ');
  return `Hello, ${name}!`;
}
const persons = ['fly63'];

map(persons, greet);

// map() 开始
// greet() 被调用 
// map() 完成

greet()是一个同步回调函数,因为它与高阶函数map()同时执行。

2.1 同步回调的例子

很多原生 JavaScript 类型的方法都使用同步回调。

最常用的是数组方法,例如array.map(callback),array.forEach(callback),array.find(callback),array.filter(callback),array.reduce(callback, init):

// 数组上的同步回调的示例

const persons = ['fly63', '前端fly63']
persons.forEach(
  function callback(name) {
    console.log(name);
  }
);
// fly63
// 前端fly63

const nameStartingA = persons.find(
  function callback(name) {
    return name[0].toLowerCase() === '小';
  }
)
// nameStartingA // fly63

const countStartingA = persons.reduce(
  function callback(count, name) {
    const startsA = name[0].toLowerCase() === '小';
    return startsA ? count + 1 : count;
  }, 
  0
);

countStartingA // 1


3.异步回调

异步回调在执行高阶函数之后执行。

简而言之,异步回调是非阻塞的:高阶函数无需等待回调即可完成其执行,高阶函数可确保稍后在特定事件上执行回调。

在下面的示例中,later()函数的执行延迟为2秒

console.log('setTimeout() 开始')
setTimeout(function later() {
  console.log('later() 被调用')
}, 2000)
console.log('setTimeout() 完成')

// setTimeout() 开始
// setTimeout() 完成
// later() 被调用(2秒后)

3.1 异步回调的示例

计时器函数的异步回调:

setTimeout(function later() {
  console.log('2秒过去了!');
}, 2000);

setInterval(function repeat() {
  console.log('每2秒');
}, 2000);

dom 事件监听器也是异步调用事件处理函数(回调函数的一种子类型)

const myButton = document.getElementById('myButton');

myButton.addEventListener('click', function handler() {
  console.log('我被点击啦!');
})
// 点击按钮时,才会打印'我被点击啦!'


4. 异步回调函数 vs 异步函数

放在函数定义之前的特殊关键字async创建一个异步函数:

async function fetchUserNames() {
  const resp = await fetch('https://api.github.com/users?per_page=5');
  const users = await resp.json();
  const names = users.map(({ login }) => login);
  console.log(names);
}

fetchUserNames()是异步的,因为它的前缀是async。 该函数await fetch('https://api.github.com/users?per_page=5')从 GitHub 前5个用户。 然后从响应对象中提取 JSON 数据:await resp.json()。

async函数是 Promise 的语法糖。 当遇到表达式await <promise>时(注意,调用fetch()将返回一个 promise),异步函数将暂停执行直到该promise得以解决。

异步回调函数和异步函数是不同的术语。

异步回调函数由高阶函数以非阻塞方式执行。 但是异步函数在等待promise(await <promise>)解析时暂停其执行。

但是,我们可以将异步函数用作异步回调!

我们异步函数fetchUserNames()设为单击按钮时调用的异步回调:

const button = document.getElementById('fetchUsersButton');

button.addEventListener('click', fetchUserNames);


总结

回调是一个可以作为参数接受并由另一个函数(高阶函数)执行的函数.

有两种回调函数:同步和异步。

同步回调函数与使用回调函数的高阶函数同时执行,同步回调是阻塞的。另一方面,异步回调的执行时间比高阶函数的执行时间晚,异步回调是非阻塞的。

原文:https://dmitripavlutin.com/


链接: https://fly63.com/article/detial/10082

JavaScript 函数式编程

我理解的 JavaScript 函数式编程,都认为属于函数式编程的范畴,只要他们是以函数作为主要载体的。

Js函数式编程,给你的代码增加一点点函数式编程的特性

给你的代码增加一点点函数式编程的特性,最近我对函数式编程非常感兴趣。这个概念让我着迷:应用数学来增强抽象性和强制纯粹性,以避免副作用,并实现代码的良好可复用性。同时,函数式编程非常复杂。

让我们来创建一个JavaScript Wait函数

Async/await以及它底层promises的应用正在猛烈地冲击着JS的世界。在大多数客户端和JS服务端平台的支持下,回调编程已经成为过去的事情。当然,基于回调的编程很丑陋的。

JavaScript函数创建的细节

如果你曾经了解或编写过JavaScript,你可能已经注意到定义函数的方法有两种。即便是对编程语言有更多经验的人也很难理解这些差异。在这篇博客的第一部分,我们将深入探讨函数声明和函数表达式之间的差异。

编写小而美函数的艺术

随着软件应用的复杂度不断上升,为了确保应用稳定且易拓展,代码质量就变的越来越重要。不幸的是,包括我在内的几乎每个开发者在职业生涯中都会面对质量很差的代码。这些代码通常有以下特征:

javascript回调函数的理解和使用方法(callback)

在js开发中,程序代码是从上而下一条线执行的,但有时候我们需要等待一个操作结束后,再进行下一步操作,这个时候就需要用到回调函数。 在js中,函数也是对象,确切地说:函数是用Function()构造函数创建的Function对象。

js调用函数的几种方法_ES5/ES6的函数调用方式

这篇文章主要介绍ES5中函数的4种调用,在ES5中函数内容的this指向和调用方法有关。以及ES6中函数的调用,使用箭头函数,其中箭头函数的this是和定义时有关和调用无关。

JavaScript中函数的三种定义方法

函数的三种定义方法分别是:函数定义语句、函数直接量表达式和Function()构造函数的方法,下面依次介绍这几种方法具体怎么实现,在实际编程中,Function()构造函数很少用到,前两中定义方法使用比较普遍。

js在excel的编写_excel支持使用JavaScript自定义函数编写

微软 称excel就实现面向开发者的功能,也就是说我们不仅可以全新定义的公式,还可以重新定义excel的内置函数,现在Excel自定义函数增加了使用 JavaScript 编写的支持,下面就简单介绍下如何使用js来编写excel自定义函数。

js中的立即执行函数的写法,立即执行函数作用是什么?

这篇文章主要讲解:js立即执行函数是什么?js使用立即执行函数有什么作用呢?js立即执行函数的写法有哪些?

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!