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+ba*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)代表myResolvefunction(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>

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

阿里云弹性计算通用算力型u1实例性能评测,性价比高

阿里云服务器u1是通用算力型云服务器&#xff0c;CPU采用2.5 GHz主频的Intel(R) Xeon(R) Platinum处理器&#xff0c;ECS通用算力型u1云服务器不适用于游戏和高频交易等需要极致性能的应用场景及对业务性能一致性有强诉求的应用场景(比如业务HA场景主备机需要性能一致)&#xf…

某站价值5000的码支付多商户商业版 完美可运营版本PHP源码

一款非常好用的码支付即时到账PHP源码 互站网卖4999 买来之后 模板有点丑 自己更换了的一个好看点的 1.修改数据库 用户名 密码 数据库名 2.后台地址 你的域名/admin 账号admin 密码123456 3.通用的监控APP软件, 反编译一下修改成你平台的名字和图标即可 源码免费…

动规训练2

一、最小路径和 1、题目解析 就是一个人从左上往做下走&#xff0c;每次只能往右或者往下&#xff0c;求他到终点时&#xff0c;路径上数字和最小&#xff0c;返回最小值 2、算法原理 a状态表示方程 小技巧&#xff1a;经验题目要求 用一个二维数组表示&#xff0c;创建一个…

(4)(4.6) Triducer

文章目录 前言 1 安装triducer 2 故障排除 3 参数说明 前言 Triducer 集速度、温度和深度传感器于一体。埃文在这篇 ardupilot.org 博文底部提供了这些说明(Evan at the bottom of this ardupilot.org blog post)。 1 安装triducer 下面的示例提供了在 Pixhawk 上安装 tri…

javaWeb城市公交查询系统的设计与实现

一、选题背景 随着低碳生活的普及&#xff0c;人们更倾向于低碳环保的出行方式&#xff0c;完善公交系统无疑具有重要意义。公交是居民日常生活中最常使用的交通工具之一&#xff0c;伴随着我国经济繁荣和城市人口增长&#xff0c;出行工具的选择也变得越来越重要。政府在公共…

使用vuepress搭建个人的博客(一):基础构建

前言 vuepress是一个构建静态资源网站的库 地址:VuePress 一般来说,这个框架非常适合构建个人技术博客,你只需要把自己写好的markdown文档准备好,完成对应的配置就可以了 搭建 初始化和引入 创建文件夹press-blog npm初始化 npm init 引入包 npm install -D vuepress…

涂鸦 IoT 开发平台产品开发使用教程

产品开发 一、涂鸦 IoT 平台 地址。 什么是涂鸦 IoT 开发平台&#xff1f; 涂鸦 IoT 开发平台支持海量物联网&#xff08;IoT&#xff09;设备、网关、服务、应用连接上云。在 产品开发 阶段&#xff0c;涂鸦 IoT 开发平台提供了多种连接方式&#xff0c;实现设备与 Io…

最新梨花带雨网页音乐播放器

源码简介 最新梨花带雨网页音乐播放器二开优化修复美化版全开源版本源码下载 梨花带雨播放器基于thinkphp6开发的XPlayerHTML5网页播放器前台控制面板,支持多音乐平台音乐解析。二开内容&#xff1a;修复播放器接口问题&#xff0c;把接口本地化&#xff0c;但是集成外链播放…

【系统架构师】-软件架构评估

1、质量属性 1、性能 系统的响应能力&#xff0c;响应时间、吞吐量&#xff0c; 策略&#xff1a;优先级队列、资源调度 2、可用性 系统正常运行的时间比例&#xff08;两次故障之间的时间长度&#xff09;&#xff0c;故障间隔时间&#xff0c; 策略&#xff1a;冗余、心…

JavaScript基础代码练习之翻转数组

一、要求将给定数组 [red, green, blue, pink, purple] 的内容反转存放&#xff0c;并将结果输出到控制台。 二、编写代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" cont…

【漏洞复现】通天星CMSV6车载主动安全监控云平台inspect_file接口处存在任意文件上传漏洞

免责声明&#xff1a;文章来源互联网收集整理&#xff0c;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关。该…

深度学习评价指标(1):目标检测的评价指标

1. 简述 在计算机视觉/深度学习领域&#xff0c;每一个方向都有属于自己的评价指标。通常在评估一个模型时&#xff0c;只需要计算出相应的评价指标&#xff0c;便可以评估算法的性能。同时&#xff0c;所谓SOTA&#xff0c;皆是基于某一评价指标进行的评估。 接下来&#xff0…

如何通过Elasticsearch实现搜索的关键词达到高亮的效果

高亮 首先介绍一下什么是搜索的关键词达到高亮的效果&#xff0c;如图所示 当在百度里面搜索elasticsearch的时候&#xff0c;可以看到出现的搜索结果里面elasticsearch这个关键词明显与其他的条文不一样&#xff0c;用红颜色凸显了“高亮效果”。当我们想要在自己的项目里面…

基于JSP的农产品供销服务系统

背景 互联网的迅猛扩张彻底革新了全球各类组织的运营模式。自20世纪90年代起&#xff0c;中国的政府机关和各类企业便开始探索利用网络系统来处理管理事务。然而&#xff0c;早期的网络覆盖范围有限、用户接受度不高、互联网相关法律法规不完善以及技术开发不够成熟等因素&…

JMM内存模型 volatile关键字解析

前言 对于多线程等等的各种操作,相比各位都了然于胸,现在我们来介绍一下更底层一点点的JMM内存模型,其实也是一个很简单的理想的内存模型 注意与JVM的内存模型区分 多线程内存模型主要是基于CPU缓存搭建起来的 这里就区分工作内存和主内存了 我们线程操作的其实是主内存的一个副…

【WEEK6】 【DAY3】MySQL函数【中文版】

2024.4.3 Wednesday 目录 5.MySQL函数5.1.常用函数5.1.1.数据函数5.1.2.字符串函数5.1.2.1.CHAR_LENGTH(str)计算字符串str长度5.1.2.2.CONCAT(str1,str2,...)拼接字符串str1 str2 ...5.1.2.3.INSERT(str,pos,len,newstr)把原文str第pos位开始长度为len的字符串替换成newstr5.…

Springboot传参要求

传参的参数名称必须与Set方法的参数名字相同 &#xff0c;不然会报错。

PAC的启用与构建

PAC如何启用?构建PAC的编译选项控制&#xff1f;本博客探讨这几个问题。

【局部路径规划算法】—— DWA动态窗口法(c++实现))

参考资料&#xff1a; &#xff08;1&#xff09;机器人局部避障的动态窗口法(dynamic window approach) &#xff08;2&#xff09;机器人局部避障的动态窗口法 &#xff08;3&#xff09;局部规划算法&#xff1a;DWA算法原理 &#xff08;4&#xff09;SLAM学习&#xff1a;…

Android Monkey自动化测试

monkey一般用于压力测试&#xff0c;用户模拟用户事件 monkey 基本用法 adb shell monkey [参数] [随机事件数]monkey常用命令 -v&#xff1a;用于指定反馈信息级别&#xff0c;总共分三个等级-v -v -vadb shell mokey -v -v -v 100-s&#xff1a;用于指定伪随机数生成器的种…