当前位置: 首页 > news >正文

vue js 回调函数 异步处理 为什么要 let that = this

1 异步就是开个事务(只有主线程 等主线程空闲),用that 值 做处理,然后返回处理结果,而that的值是开启事务那一刻的this的值.而在主线程处理的时候,this的一直在变化, that的值保留在那一刻

ps 或是将本obj 传递给其他的obj使用处理

ps 开启新事务或开启新子线程都是 在新的obj里处理数据,所以不是同一个obj 

-> 所以你不能在不是相同的obj 用this 指定另一个obj

js this 指的是什么_tenc1239的博客-CSDN博客

在 JavaScript 中,异步代码会在单独的线程中运行,
并且会在未来的某个时刻返回结果。在异步函数中,
this 的值可能会发生变化,因此我们需要在异步函数外部将 this 赋值给另一个变量 that,
以便我们在异步函数中能够访问对象的属性。当异步代码返回结果时,
我们可以使用回调函数来处理返回的结果。在回调函数中,
我们可以使用之前保存的 that 值来访问对象的属性。
回调函数确实可以用于异步或耗时的操作,但是它不是开启子线程的方式。
在 JavaScript 中,主线程是唯一的线程,我们无法创建子线程来执行代码。
当我们执行异步操作时,会将它们添加到事件队列中,并继续执行主线程中的其他任务。
当异步操作完成时,会将回调函数添加到事件队列中,等待主线程空闲时执行。所以说,回调函数的作用是允许我们在异步操作完成后执行一些回调任务,
而不需要在主线程中等待这些操作完成。这样可以使我们的程序更加高效。
抱歉,我之前的回答可能有误导性。JavaScript 中确实不支持多线程,
它是单线程的。当我们执行异步操作时,这些操作会被添加到事件队列中,
等待主线程空闲时执行。这并不是开启了一个子线程来执行异步操作,
而是利用了事件循环来实现异步编程。主线程会不断地从事件队列中取出任务执行,
这样就不会阻塞主线程,使程序更加高效。我希望这次能够更清楚地回答你的问题。
那 that= this 的目的就是让that等于this再创建异步事件时的值,
等待主线程空闲时 用这个值处理?是的,这是一种常见的解决异步编程中 this 指向丢失的问题的方式。
在 JavaScript 中,函数的执行环境是动态的,this 指向是根据函数的调用方式来确定的。
当函数被作为回调函数传递,且回调函数是在异步事件中被调用时,this 指向有可能会丢失。
为了保持 this 指向,我们可以将 this 保存在一个变量中,
这样在回调函数中使用这个变量即可保持正确的 this 指向。一般来说,
这个变量被命名为 that,也可以是其他的名字。在异步事件中,that 会等待主线程空闲时再被使用。

2 异步 但是没有在异步处理函数中 不用that = this

 async handleAnalysis(params) {this.logList.push(`数据分析: ${minDate} - ${maxDate}`)
}

3 异步在异步处理函数中 用that = this

 request.onsuccess = function (event) {that.logList.push(`数据获取成功 : ${key}`)
}

4 回调函数 用that = this ->回调函数的作用是允许我们在一个函数中处理一些异步或耗时的操作,而不需要等待它们完成

4.1 

var obj = {name: "obj",method: function() {// 在对象方法中,this 指向该对象console.log(this.name);  // 输出 "obj"var innerFunction = function() {// 在内部函数中,this 指向全局对象console.log(this.name);  // 输出 undefined}innerFunction();}
}
obj.method();

4.2 箭头函数

function doSomething(param1, param2, callback) {// some code here// 当操作完成时,调用回调函数,并将结果作为参数传递给回调函数callback(result);
}// 调用doSomething函数,传递一个箭头函数作为回调函数
doSomething(1, 2, result => {// 回调函数的处理逻辑
});

4.3

相关文章:

vue js 回调函数 异步处理 为什么要 let that = this

1 异步就是开个事务(只有主线程 等主线程空闲),用that 值 做处理,然后返回处理结果,而that的值是开启事务那一刻的this的值.而在主线程处理的时候,this的一直在变化, that的值保留在那一刻 ps 或是将本obj 传递给其他的obj使用处理 ps 开启新事务或开启新子线程都是 在新的ob…...

前端面试:【算法与数据结构】常见数据结构解析

在计算机科学中,数据结构是组织和存储数据的方式。精通常见的数据结构对于解决计算机科学和编程问题至关重要。本文将深入探讨常见的数据结构:数组、链表、栈、队列和哈希表,以帮助你建立坚实的数据结构基础。 1. 数组(Array&…...

RTSP/Onvif视频服务器EasyNVR安防视频云服务平台出现崩溃并重启的情况解决方案

EasyNVR安防视频云服务平台的特点是基于RTSP/Onvif协议将前端设备统一接入,在平台进行转码、直播、处理及分发,在安防监控场景中,EasyNVR可实现实时监控、云端录像、云存储、告警、级联等视频能力,极大满足行业的视频监控需求。 有…...

软考高级系统架构设计师系列论文九十四:论计算机网络的安全性设计

软考高级系统架构设计师系列论文九十四:论计算机网络的安全性设计 一、计算机网络安全性设计相关知识点二、摘要三、正文四、总结一、计算机网络安全性设计相关知识点 软考高级系统架构设计师:计算机网络...

jenkins Linux如何修改jenkins 默认的工作空间workspace

由于jenkins默认存放数据的目录是/var/lib/jenkins,一般这个var目录的磁盘空间很小的,就几十G,所以需要修改jenkins的默认工作空间workspace 环境 jenkins使用yum安装的 centos 7 正题 1 查看jenkins安装路径 [rootlocalhost jenkins_old_data]# rpm…...

Mysql报错 mysqladmin flush-hosts

出现这个的原因是错误连接达到数据库设置的最大值。 此时需要释放重置连接最大值。 进入mysql使用命令 flush-hosts;环境说明: 内网测试服务器192.168.18.251 为WEB服务器,安装了mysql; 内网音视频转码服务器192.168.18.253安装了转码工具&#xff0…...

javaee idea创建maven项目,使用el和jstl

如果使用el表达式出现下图问题 解决办法 这是因为maven创建项目时&#xff0c;web.xml头部声明默认是2.3&#xff0c;这个默认jsp关闭el表达式 办法1 在每个需要用到el和jstl的页面的上面加一句: <% page isELIgnored"false" %> 方法2 修改web.xml文件开…...

同一个服务器发布两个前端(网站)

一开始怎么设置都是505&#xff0c;后来把网站文件的位置换到原已经发布成功的网站位置&#xff0c;就成功了。考虑应该是权限问题 server {listen 80;server_name localhost;# https配置参考 start#listen 443 ssl;# 证书直接存放 /docker/nginx/cert/ 目录下即…...

部署常用指南

https://docs.conda.io/en/latest/miniconda.html#installing 环境配置 安装和配置 Anaconda 安装 Anaconda。 配置镜像源&#xff1a; yaml conda配置 vim ~/.condarc channels: - https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/pro/ - https://mirrors.tuna.ts…...

4.5 TCP优化

TCP 三次握手的性能提升 三次握手的过程在一个 HTTP 请求的平均时间占比 10% 以上&#xff0c;所以要正确使用三次握手的中参数&#xff0c;需要先用netstat命令查看是哪个握手阶段出了问题&#xff0c;主动发起连接的客户端优化相对简单些&#xff0c;而服务端需要监听端口&a…...

pdf太大怎么压缩大小?这样压缩文件很简单

工作和学习中&#xff0c;用到PDF文件的机会还是比较多的&#xff0c;但有时候PDF文件过大会给我们带来困扰&#xff0c;比如上传PDF文件时会因超出系统大小导致无法上传&#xff0c;这时候简单的解决方法就是压缩PDF文件&#xff0c;下面就来看看具体的操作方法吧~ 方法一&…...

【IMX6ULL驱动开发学习】09.Linux之I2C框架简介和驱动程序模板

参考&#xff1a;Linux之I2C驱动_linux i2c驱动_风间琉璃•的博客-CSDN博客​​​​​​ 目录 一、I2C驱动框架简介 1.1 I2C总线驱动 1.2 I2C设备驱动 二、I2C总线-设备-驱动模型 2.1 i2c_driver 2.2 i2c_client 2.3 I2C 设备数据收发和处理 三、Linux I2C驱动程序模板…...

【seaweedfs】3、f4: Facebook’s Warm BLOB Storage System 分布式对象存储的冷热数据

论文地址 Facebook的照片、视频和其他需要可靠存储和快速访问的二进制大型对象(BLOB)的语料库非常庞大&#xff0c;而且还在继续增长。随着BLOB占用空间的增加&#xff0c;将它们存储在我们传统的存储系统-- Haystack 中变得越来越低效。为了提高我们的存储效率(以Blob的有效复…...

基于亚马逊云科技服务,构建大语言模型问答知识库

随着大语言模型效果明显提升&#xff0c;其相关的应用不断涌现呈现出越来越火爆的趋势。其中一种比较被广泛关注的技术路线是大语言模型&#xff08;LLM&#xff09;知识召回&#xff08;Knowledge Retrieval&#xff09;的方式&#xff0c;在私域知识问答方面可以很好的弥补通…...

SpingMVC拦截器-用户登录权限控制分析

视频链接&#xff1a;08-SpringMVC拦截器-用户登录权限控制代码实现2_哔哩哔哩_bilibili 114 1、做了一个用户跟角色添加的相关操作 1.1 这个后台工程&#xff0c;没有进行相关操作也能够进行登录&#xff1a; 2、现在我做一个用户的权限控制&#xff0c;如果当前我没有进行操…...

MDTA模块(Restormer)

From a layer normalized tensor Y ∈ R H ^ W ^ C ^ \mathbf{Y} \in \mathbb{R}^{\hat{H} \times \hat{W} \times \hat{C}} Y∈RH^W^C^, our MDTA first generates query ( Q ) (\mathbf{Q}) (Q), key ( K ) (\mathbf{K}) (K) and value ( V ) (\mathbf{V}) (V) project…...

C++ 新特性 | C++ 11 | decltype 关键字

一、decltype 关键字 1、介绍 decltype 是 C11 新增的一个用来推导表达式类型的关键字。和 auto 的功能一样&#xff0c;用来在编译时期进行自动类型推导。引入 decltype 是因为 auto 并不适用于所有的自动类型推导场景&#xff0c;在某些特殊情况下 auto 用起来很不方便&…...

2023国赛数学建模思路 - 案例:退火算法

文章目录 1 退火算法原理1.1 物理背景1.2 背后的数学模型 2 退火算法实现2.1 算法流程2.2算法实现 建模资料 ## 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 退火算法原理 1.1 物理背景 在热力学上&a…...

ubuntu20.04 编译安装运行emqx

文章目录 安装依赖编译运行登录dashboard压力测试 安装依赖 Erlang/OTP OTP 24 或 25 版本 apt-get install libncurses5-dev sudo apt-get install erlang如果安装的erlang版本小于24的话&#xff0c;可以使用如下方法自行编译erlang 1.源码获取 wget https://github.com/erla…...

ARM linux ALSA 音频驱动开发方法

+他V hezkz17进数字音频系统研究开发交流答疑群(课题组) 一 linux ALSA介绍 ALSA (Advanced Linux Sound Architecture) 是一个用于提供音频功能的开源软件框架。它是Linux操作系统中音频驱动程序和用户空间应用程序之间的接口。ALSA 提供了访问声卡硬件的低级别API,并支持…...

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

【杂谈】-递归进化:人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

让AI看见世界:MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

云原生玩法三问:构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...