JavaScript(六)---【回调、异步、promise、Async】

零.前言

JavaScript(一)---【js的两种导入方式、全局作用域、函数作用域、块作用域】-CSDN博客

JavaScript(二)---【js数组、js对象、this指针】-CSDN博客

JavaScript(三)---【this指针，函数定义、Call、Apply、函数绑定、闭包】-CSDN博客

JavaScript(四)---【执行上下文、hoisting(提升)、严格模式、事件】-CSDN博客

JavaScript(五)---【DOM】-CSDN博客

一.回调

1.1简介

“回调”是作为参数传递给另一个函数的函数

这种技术允许函数调用另一个函数，回调函数可以在另一个函数完成后运行

1.2什么时候使用回调函数

现在假设有一个业务需求：”先计算两个数的和，再将和输出，并且我们可以随时终止输出和“

或许有的读者会很轻松的写出如下代码：

    <script>function printData(result){console.log(result);}function calculator(x,y){let sum = x + y;return sum;}let result = calculator(5,5);printData(result);</script>

我们将计算和输出分别用两个函数来完成，但是这样会有一个问题，那就是每次我们都需要使用两个函数，比较麻烦。

此时，可能有读者又会写出另一种风格的代码：

    <script>function printData(result){console.log(result);}function calculator(x,y){let sum = x + y;printData(sum);}calculator(5,5);</script>

在“calculator函数中调用printData函数”，这样每次只需要调用一次“calculator”函数就可以了，但是这样仍然有一个问题，那就是：“无法随时禁止打印的过程”

那么此时就用到我们的回调函数了，将printData函数作为参数传给calculator函数即可。

但在使用前，我们还是有必要先说明一下怎么使用回调函数。

1.3回调函数的使用

回调函数的使用非常简单，将需要在A函数调用的B函数作为参数传递给A函数即可。

此时B函数就成为A函数的一个形参，而在A函数中就可以利用形参来代指B函数。

例如：

    <script>function B(){console.log("我是B函数");}function A(myB){console.log("我是A函数");myB();}A(B);</script>

效果：

注意：

在将B函数作为参数传递给A函数时，实参不能带有括号，只需要写“函数名”即可

而在A函数中使用形参“myB”代指B函数时，则需要加上“括号”

1.4问题的解决

那么搞明白回调函数的使用之后，我们来是用回调函数解决这个问题。

业务需求：“先计算两数之和，再输出两数之和，并且可以随时终止输出的过程”

解决思路：“我们将printData函数作为参数传递给calculator函数，在calculator函数中调用printData函数用来完成计算并输出的功能，此时如果需要终止输出的过程那么可以给calculator的形参传递一个空值，用来表示此时不需要输出”

    <script>function printData(result){console.log(result);}function calculator(x,y,myData){let sum = x + y;if (myData)myData(sum);}calculator(5,5,printData);  //此时需要输出calculator(10,10,undefined)    //此时不需要输出</script>

效果：

二.异步

2.1简介

如果大家接触过“多线程”的概念，那么“异步”应该是非常好理解的。

一个相对好理解的说法就是：“异步就是在同一时间运行多个代码段(函数、代码块等)”

而官方的说法：“与其它函数并行运行的函数称为异步”

给大家举一个例子：“在某一时刻，我们需要同时获得a+b和a*b的值该怎么办？如果顺序执行a+b和a*b终究会有时间差，并不是同时获得。那么此时就用到了异步了，将a+b和a*b两个运算过程，同时进行”

2.2常见的异步函数

在js中内置了多个异步函数，便于我们调用，如果需要使用更多的异步函数，需要用到js库等

下面作者将论述几个常见的异步函数

2.3等待超时函数

等待超时函数：“setTimeout()”可以指定超过指定时间后，自动执行某个函数

使用方法：

setTimeout(执行函数名,超时时间(ms))

ps：使用setTimeout会返回一个超时函数变量(该变量存储了超时函数id)

结束方法：

使用：“clearTimeout(超时函数变量)”来强制结束

注意：强制结束应该在超时函数执行前使用，否则无效

例如：

    <script>function myFunction(){console.log("我被调用了");}setTimeout(myFunction,3000)</script>

以上这个函数将会在：“3秒后自动被调用”

可以发现setTimeout的参数是一个函数，也就是说setTimeout是一个“回调函数”

2.4等待间隔函数

等待间隔函数：“setInterval()”可以指定每隔指定时间，执行一次函数，直到程序被关闭或者人为结束

(ps:该函数用的特别多)

使用方法：

setInterval(函数名,指定时间(ms))

ps：使用setInterval函数会返回一个异步函数变量(这个变量存储该异步函数的id)

人为结束“setInterval”函数的方法：“使用clearIntervar(异步函数变量)”来强制结束“setInterval”

    <script>function interVal(){console.log("我是等待间隔函数,我被调用了.");}function stopInterVal(){clearInterval(time);}var time = setInterval(interVal,1000);</script>

以上是一个简单的开启关闭示例

三.promise

3.1简介

promise是一个js对象，它链接“生成代码”和“消费代码”

  • “生成代码”(Producing code)：指需要一些时间的代码
  • “消费代码”(Consuming code)：指必须等待结果的代码

3.2使用方式

let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code"（可能需要一些时间）myResolve(); // 成功时myReject();  // 出错时
});// "Consuming Code" （必须等待一个兑现的承诺）
myPromise.then(function(value) { /* 成功时的代码 */ },function(error) { /* 出错时的代码 */ }
);

 注意：

当“执行代码”也就是“消费代码”获得结果时，它必须调用两个回调函数之一：“myResolve、myReject”

而在“消费代码”中，“function(value)代表myResolve、function(error)代表myReject”

例如：

function myDisplayer(some) {document.getElementById("demo").innerHTML = some;
}let myPromise = new Promise(function(myResolve, myReject) {let x = 0;// 生成代码（这可能需要一些时间）if (x == 0) {myResolve("OK");} else {myReject("Error");}
});myPromise.then(function(value) {myDisplayer(value);},function(error) {myDisplayer(error);}
);

四.Async和Await

4.1简介

使用async关键字，可以使我们更方便的使用promise函数，而不是创建一个promise对象。

通过在函数前面加入关键字“async”可以使函数返回“promise”

使用“await”关键字，可以使函数等待“promise”

4.2使用方法

例如：

async function myFunction() {return "Hello";
}
//等同于
async function myFunction() {return Promise.resolve("Hello");
}

而使用“async”和“await”可以使我们更方便的完成promise的操作，而promise操作的实质就是更安全的进行“异步操作”，因为promise可以进行失败逻辑判断处理

再例如：

<!DOCTYPE html>
<html>
<body><h1>JavaScript async / await</h1><p>请等待 3 秒（3000 毫秒）让此页面发生变化。</p><h1 id="demo"></h1><script>
async function myDisplay() {let myPromise = new Promise(function(myResolve, myReject) {setTimeout(function() { myResolve("I love You !!"); }, 3000);});document.getElementById("demo").innerHTML = await myPromise;
}myDisplay();
</script></body>
</html>

上面这个代码就是更安全的“异步操作”

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/790133.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

并发编程之线程池的应用以及一些小细节的详细解析

并发编程之线程池的应用以及一些小细节的详细解析

线程池在实际中的使用 实际开发中&#xff0c;最常用主要还是利用ThreadPoolExecutor自定义线程池&#xff0c;可以给出一些关键的参数来自定义。 在下面的代码中可以看到&#xff0c;该线程池的最大并行线程数是5&#xff0c;线程等候区&#xff08;阻塞队列)是3&#xff0c;即…
阅读更多...
数据挖掘|关联分析与Apriori算法详解

数据挖掘|关联分析与Apriori算法详解

数据挖掘|关联分析与Apriori算法 1. 关联分析2. 关联规则相关概念2.1 项目2.2 事务2.3 项目集2.4 频繁项目集2.5 支持度2.6 置信度2.7 提升度2.8 强关联规则2.9 关联规则的分类 3. Apriori算法3.1 Apriori算法的Python实现3.2 基于mlxtend库的Apriori算法的Python实现 1. 关联分…
阅读更多...
window中如何在Anaconda虚拟环境中安装compressai

window中如何在Anaconda虚拟环境中安装compressai

1, 进入CompressAI的Github代码页下载压缩包并解压到自己的项目路径 2&#xff0c;打开anaconda的prompt命令行&#xff0c;激活需要安装的虚拟环境&#xff0c;然后进入compressai文件夹&#xff0c;比如下操作&#xff1a; 3&#xff0c;输出安装命令行 pip install -e . -…
阅读更多...
企业必备！ 防员工偷懒神器，工作状况一目了然

企业必备！ 防员工偷懒神器，工作状况一目了然

在当前企业管理中&#xff0c;员工的工作状态和工作效率一直是管理者们关注的焦点。为了更加有效地监管员工的工作微信使用情况&#xff0c;微信管理系统成为了企业必备的神器。 这款系统不仅可以实时监控员工的工作微信&#xff0c;还具有多种实用功能&#xff0c;帮助企业管…
阅读更多...
查看图片某点亮度

查看图片某点亮度

一背景 光强度的评价通常涉及对光源发出的光的量进行测量和描述。这种评价可以通过多种方式进行&#xff0c;但最常见的是使用光强单位“坎德拉”&#xff08;candela&#xff0c;cd&#xff09;来表示。坎德拉是国际单位制&#xff08;SI&#xff09;中光强度的单位&#xff…
阅读更多...
2024 蓝桥打卡Day31

2024 蓝桥打卡Day31

递归与辗转相除法 递归&#xff08;Recursion&#xff09;辗转相除法&#xff08;Euclidean Algorithm&#xff09;总结 递归&#xff08;Recursion&#xff09; 递归是指一个函数在执行过程中调用自身的过程。在编程中&#xff0c;递归函数在遇到满足某个条件时会停止调用自身…
阅读更多...
蓝桥杯真题：货物摆放

蓝桥杯真题：货物摆放

import java.util.ArrayList;public class Main {public static void main(String args[]) {//常规思路/*long num 2021041820210418l;int count 0;for ( long i 1 ; i < num ; i ){for ( long j 1 ; j < num ; j ){for ( long k 1 ; k < num ; k ){if ( i * j *…
阅读更多...
超详细工具Navicat安装教程

超详细工具Navicat安装教程

Navicat是一款功能强大的数据库管理工具&#xff0c;可用于管理多种类型的数据库&#xff0c;包括MySQL、MariaDB、SQL Server、SQLite、Oracle和PostgreSQL等。以下是Navicat工具的一些主要特点和功能&#xff1a; 一.功能介绍 跨平台支持 多种数据库支持 直观的用户界面 数据…
阅读更多...
go连接数据库（原生）

go连接数据库（原生）

根据官网文档 Go Wiki: SQL Database Drivers - The Go Programming Language 可以看到go可以连接的关系型数据库 ​ 常用的关系型数据库基本上都支持&#xff0c;下面以mysql为例 下载mysql驱动 打开上面的mysql链接 GitHub - go-sql-driver/mysql: Go MySQL Driver i…
阅读更多...
YUNBEE云贝-技术分享：PostgreSQL分区表

YUNBEE云贝-技术分享：PostgreSQL分区表

引言 PostgreSQL作为一款高度可扩展的企业级关系型数据库管理系统&#xff0c;其内置的分区表功能在处理大规模数据场景中扮演着重要角色。本文将深入探讨PostgreSQL分区表的实现逻辑、详细实验过程&#xff0c;并辅以分区表相关的视图查询、分区表维护及优化案例&#xff0c;…
阅读更多...
【TB作品】STM32单片机读取MAX30102心率传感器，血氧传感器，稳定数值输出，stm32f103c8t6

【TB作品】STM32单片机读取MAX30102心率传感器，血氧传感器，稳定数值输出，stm32f103c8t6

文章目录 连接MAX30102心率传感器读取的数值源代码获取请看&#xff1a; 连接 MAX30102心率传感器 读取的数值 stm32f103c8t6读取&#xff0c;加上一定稳定算法&#xff0c;可见读取很稳定&#xff1a; 算法取自这里&#xff1a; https://github.com/HJ29/maxrefdes117-energ…
阅读更多...
关于搭建电商独立站跨境电商接入主流电商平台API商品接口对于商品功能模块的巨大应用

关于搭建电商独立站跨境电商接入主流电商平台API商品接口对于商品功能模块的巨大应用

功能设计 首先我们来看下mall项目中商品功能的设计&#xff0c;主要包括商品管理、添加\编辑商品、商品分类、商品类型、品牌管理等功能&#xff0c;这里的功能同时涉及前台商城和后台管理系统。 商品管理【接入主流电商平台商品API接口丰富自建商城商品】 在mall项目的后台管…
阅读更多...
业绩的非线性特征——TM模型所衡量的真的只是择时能力吗？

业绩的非线性特征——TM模型所衡量的真的只是择时能力吗？

摘要及声明 1&#xff1a;本文主要介绍Treynor-Mauzy&#xff08;TM&#xff09;模型&#xff0c;将TM模型所衡量的择时能力延伸到业绩非线性特征上&#xff1b; 2&#xff1a;本文主要为理念的讲解&#xff0c;模型也是笔者自建&#xff0c;文中假设与观点是基于笔者对模型…
阅读更多...
C++取经之路(其二)——函数重载，引用。

C++取经之路(其二)——函数重载，引用。

目录 含数重载: 为什么只有c支持&#xff1f; 引用&#xff1a; 权限放大&#xff1a; 引用的应用&#xff1a; 引用总结&#xff1a; 引用和指针的不同点: 含数重载: 函数重载是指&#xff1a;在c中&#xff0c;在同一作用域&#xff0c;函数名相同&#xff0c;形参列表…
阅读更多...
【Java】Thread详解

【Java】Thread详解

&#x1f352;前言 本文将从以下几方面来展开对Thread的介绍。 1.线程创建 2.线程中断 3.线程等待 4.线程休眠 在前面的文章中&#xff0c;已经总结了关于Thread的一些理解。 在阅读本文之前&#xff0c;最好对其有一些基础的了解。 文章链接: 【JavaSE】进程是什么&#xff1f…
阅读更多...
【Java】线程的状态

【Java】线程的状态

在之前的文章中&#xff0c;已经介绍了关于线程的基础知识。 我的主页: &#x1f346;&#x1f346;&#x1f346;爱吃南瓜的北瓜 文章目录 ✍绪论&#x1f350;1.NEW&#x1f350;2.TERMINATED&#x1f350;3.RUNNABLE--------------------&#x1f350;4.WAITING&#x1f350…
阅读更多...
harmonyOS的客户端存贮

harmonyOS的客户端存贮

什么是客户端存贮 在harmonyOS中,客户端存贮是指将数据存贮在本地设备以供应用程序使用; 注: 和feaureAblity搭配使用,content上下文的获取依赖该API如下: // 引入: import featureAbility from ohos.ability.featureAbility;// 使用: let content featureAbility.getConten…
阅读更多...
算法基础--递推

算法基础--递推

&#x1f600;前言 递推算法在计算机科学中扮演着重要的角色。通过递推&#xff0c;我们可以根据已知的初始条件&#xff0c;通过一定的规则推导出后续的结果&#xff0c;从而解决各种实际问题。本文将介绍递推算法的基础知识&#xff0c;并通过一些入门例题来帮助读者更好地理…
阅读更多...
CSS3 实现文本与图片横向无限滚动动画

CSS3 实现文本与图片横向无限滚动动画

文章目录 1. 实现效果2.html结构3. css代码 1. 实现效果 gif录屏比较卡&#xff0c;实际很湿滑&#xff0c;因为是css动画实现的 2.html结构 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"…
阅读更多...
vue快速入门（三）差值表达式

vue快速入门（三）差值表达式

注释很详细&#xff0c;直接上代码 上一篇 新增内容 插值表达式基本用法插值表达式常用公式 源码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-wid…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023