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

9.处理this和防抖、节流

news 2025/7/6 18:29:38

9.1 this指向-普通函数

普通函数的调用方式决定了this的值，即【谁调用this的值 指向谁】
在这里插入图片描述
普通函数没有明确调用者时this值为window，严格模式下没有调用者时this的值为undefined

9.2 this指向-箭头函数

箭头函数中的this与普通函数完全不同，也不受调用方式的影响，事实上箭头函数中并不存在this !

1.箭头函数会默认帮我们绑定外层this的值，所以在箭头函数中this的值和外层的this是一样的
2.箭头函数中的this引用的就是最近作用域中的this
3.向外层作用域中，一层一层查找this，直到有this的定义
在这里插入图片描述
注意情况1:
在开发中【使用箭头函数前需要考虑函数中this的值】，事件回调函数使用箭头函数时，this 为全局的window
因此DOM事件回调函数如果里面需要DOM对象的this，则不推荐使用箭头函数
在这里插入图片描述
注意情况2:
同样由于箭头函数this的原因，基于原型的面向对象也不推荐采用箭头函数
在这里插入图片描述
箭头函数总结:
1.函数内不存在this，沿用上一级的
2.不适用于 构造函数，原型函数，dom事件函数等等
3.适用于 需要使用上层this的地方

9.3改变this指向

JavaScript中还允许指定函数中this的指向，有3个方法可以动态指定普通函数中this的指向

1.call()-了解
使用call方法调用函数，同时指定被调用函数中this的值
●语法:
在这里插入图片描述
➢thisArg: 在fun函数运行时指定的this值
➢arg1, arg2：传递的其他参数
➢返回值就是函数的返回值，因为它就是调用函数
【示例】

<body><script>const obj = {name: 'Kai'}function fn() {console.log(this) // obj}// 调用函数，改变this指向fn.call(obj)</script>
</body>

2.apply()-理解
使用apply方法调用函数，同时指定被调用函数中this的值
●语法:
在这里插入图片描述
➢thisArg: 在fun函数运行时指定的this值
➢argsArray: 传递的值，必须包含在数组里面
➢返回值就是函数的返回值，因为它就是调用函数
➢因此apply主要跟数组有关系，比如使用Math.max() 求数组的最大值
在这里插入图片描述
【示例】

<body><script>const obj = {age: 18}function fn(x, y) {console.log(this) // {age: 18}console.log(x + y) // 3}fn.apply(obj, [1, 2])</script>
</body>

3.bind()-重点
●bind() 方法不会调用函数。但是能改变函数内部this指向
●语法:
在这里插入图片描述
➢thisArg: 在fun函数运行时指定的this值
➢arg1, arg2：传递的其他参数
➢返回由指定的this值和初始化参数改造的 原函数拷贝（新函数）
➢因此当我们只是想改变this指向，并且不想调用这个函数的时候，可以使用bind，比如改变定时器内部的this指向

在这里插入图片描述
【示例】

<body><button>发送短信</button><script>// 有一个按钮，点击后禁用，1s后开启const btn = document.querySelector('button')btn.addEventListener('click', function () {this.disabled = truewindow.setTimeout(function () {// 在这个普通函数里，要将this由原来的window 改为 btnthis.disabled = false}.bind(this), 1000)})</script>
</body>

4.call apply bind 总结
在这里插入图片描述

9.4防抖(debounce)

●防抖：单位时间内，频繁触发事件，只执行最后一次
●使用场景:
➢搜索框搜索输入。只需用户最后一次输入完，再发送请求
➢手机号、邮箱验证输入检测

利用防抖来处理-鼠标滑过盒子显示文字
要求：鼠标在盒子上移动，鼠标停止500ms之后，里面的数字才会变化+1
实现方式:

1.lodash提供的防抖来处理
【示例】

<body><div class="box"></div><script src="lodash.min.js"></script><script>const box = document.querySelector('.box')let i = 1function move() {box.innerHTML = i++}// 利用lodash库实现防抖 - 500毫秒后执行+1// 语法：_.debounce(fun, 时间)box.addEventListener('mousemove', _.debounce(move, 500))</script>
</body>

2.手写一个防抖函数来处理
【示例】

<body><div class="box"></div><script>const box = document.querySelector('.box')let i = 1function move() {box.innerHTML = i++}// 手写防抖函数// 利用setTimeout实现// 1.声明定时器变量// 2.每次鼠标移动（事件触发）的时候都要先判断是否有定时器，有就先清除// 3.没有则开启定时器// 4.定时器里面写函数调用function debounce(fn, t) {let timer// return 返回一个匿名函数return function () {// 2.3.4if (timer) clearTimeout(timer)timer = setTimeout(function () {fn()}, t)}}box.addEventListener('mousemove', debounce(move, 500))</script>
</body>

9.5节流-throttle

●节流：单位时间内，频繁触发事件，只执行一次
●使用场景:
➢高频事件：鼠标移动mousemove、页面尺寸缩放resize、 滚动条滚动scroll等等

1.lodash提供的节流来处理
【示例】

<body><div class="box"></div><script src="lodash.min.js"></script><script>const box = document.querySelector('.box')let i = 1function move() {box.innerHTML = i++}// 利用lodash库实现节流 - 500毫秒后执行 + 1// 语法：_.throttle(fun, 时间)box.addEventListener('mousemove', _.throttle(move, 500))</script>
</body>

2.手写一个节流函数来处理
【示例】

<body><div class="box"></div><script src="lodash.min.js"></script><script>const box = document.querySelector('.box')let i = 1function move() {box.innerHTML = i++}// 手写节流函数 利用setTimeout实现// 1.声明定时器变量// 2.每次鼠标移动（事件触发）的时候都要先判断是否有定时器，有就不开启新的定时器// 3.没有则开启定时器// 4.定时器里面写函数调用,定时器里面要把定时器清空function throttle(fn, t) {let timer = nullreturn function () {if (!timer) {timer = setTimeout(function () {fn()// 清空定时器// 在 setTimeout 中是无法删除定时器的,因为定时器还在运作// 所以使用timer = null 而不是clearTimeout(timer)timer = null}, t)}}}box.addEventListener('mousemove', throttle(move, 500))</script>
</body>

3.防抖和节流总结

在这里插入图片描述
在这里插入图片描述

9.6案例-页面打开，可以记录上一次的视频播放位置

两个事件:
1.ontimeupdate事件在视频/音频(audio/video) 当前的播放位置发送改变时触发
2.onloadeddata事件在当前帧的数据加载完成且还没有足够的数据播放视频/音频(audio/video)的下一帧时触发
【部分代码示例】

<script>// 1.获取视频元素const video = document.querySelector('video')video.ontimeupdate = _.throttle(function () {// console.log(video.currentTime) 获得当前的视频时间// 把当前的时间存储到本地存储localStorage.setItem('now', video.currentTime)}, 1000)// 2.打开页面触发事件,就从本地存储里取出记录的时间,赋值给video.currentTimevideo.onloadeddata = () => {video.currentTime = localStorage.getItem('now') || 0}</script>

相关文章：

9.处理this和防抖、节流

9.1 this指向-普通函数 普通函数的调用方式决定了this的值&#xff0c;即【谁调用this的值 指向谁】 普通函数没有明确调用者时this值为window&#xff0c;严格模式下没有调用者时this的值为undefined 9.2 this指向-箭头函数 箭头函数中的this与普通函数完全不同&#xff0…...

编程日记 2023/8/19 3:42:20

Spark操作Hive表幂等性探索

前言 旁边的实习生一边敲着键盘一边很不开心的说：做数据开发真麻烦，数据bug排查太繁琐了，我今天数据跑的有问题，等我处理完问题重新跑了代码，发现报表的数据很多重复，准备全部删了重新跑。 我：你的数据操作具备幂等性吗？ 实习生：啥是幂等性？数仓中的表还要考虑幂等…...

编程日记 2023/8/19 3:41:19

【可变形卷积3】 DCNv2 安装

使用RTM3D 代码&#xff0c;CenterTrack代码需要用DCN 1、安装DCNv2 &#xff08;1&#xff09;github上最新版的DCNv2源码在"https://github.com/CharlesShang/DCNv2"&#xff0c;但是该版本源码不支持PyTorch1.7&#xff0c;如果使其支持PyTorch1.7需要做以下修改…...

编程日记 2023/8/19 3:40:18

归并排序 与 计数排序

目录 1.归并排序 1.1 递归实现归并排序&#xff1a; 1.2 非递归实现归并排序 1.3 归并排序的特性总结: 1.4 外部排序 2.计数排序 2.1 操作步骤: 2.2 计数排序的特性总结: 3. 7种常见比较排序比较 1.归并排序 基本思想: 归并排序(MERGE-SORT)是建立在归并操作上的一种…...

编程日记 2023/8/19 3:39:12

机器学习之逻辑回归

import numpy as np import pandas as pd from sklearn.model_selection import train_test_split from sklearn.preprocessing import StandardScaler from sklearn.linear_model import LogisticRegression # 获得数据 names[Sample code number,Clump Thickness,Uniformity…...

编程日记 2023/8/19 3:38:10

操作符详解上（非常详细）

目录 二进制介绍二进制2进制转10进制10进制转2进制数字2进制转8进制和16进制2进制转8进制2进制转16进制 原码、反码、补码移位操作符左移操作符右移操作符 位操作符&#xff1a;&、|、^逗号表达式 二进制介绍 在初学计算机时我们常常会听到2进制、8进制、10进制、16进制……...

编程日记 2023/8/19 3:37:08

React 高阶组件(HOC)

React 高阶组件(HOC) 高阶组件不是 React API 的一部分&#xff0c;而是一种用来复用组件逻辑而衍生出来的一种技术。 什么是高阶组件 高阶组件就是一个函数&#xff0c;且该函数接受一个组件作为参数&#xff0c;并返回一个新的组件。基本上&#xff0c;这是从 React 的组成…...

编程日记 2023/8/19 3:36:07

【NepCTF2023】复现

文章目录 【NepCTF2023】复现MISC与AI共舞的哈夫曼codesc语言获取环境变量 小叮弹钢琴陌生的语言你也喜欢三月七么Ez_BASIC_IImisc参考 WEBez_java_checkinPost Crad For You独步天下配置环境独步天下-镜花水月环境变量提权 独步天下-破除虚妄总结 独步天下-破除试炼_加冕成王知…...

编程日记 2023/8/19 3:35:05

大文件切片上传

创建组件&#xff1a;创建一个组件用于处理文件上传&#xff0c;命名为Upload.vue。 <template><div><input type"file" change"handleFileChange" /><button click"startUpload">开始上传</button></div> …...

编程日记 2023/8/19 3:34:04

ubuntu切换python版本

在没有安装类似anoconda的管理工具的时候&#xff0c;我们常常会被Ubuntu下的Python版本切换问题所头疼。 可以使用update-alternatives工具进行python版本的任意切换 当使用update-alternatives工具来切换Ubuntu系统上的Python版本时&#xff0c;您实际上是在系统范围内选择…...

编程日记 2023/8/19 3:33:01

docker 安装 elasticsearch、kibana 7.4.2

切换root 用户 su root 拉起镜像 docker pull elasticsearch:7.4.2 docker pull kibana:7.4.2 #1、创建Elasticsearch配置文件夹 mkdir -p /mydata/elasticsearch/config ​ #2、创建Elasticsearch数据文件夹 mkdir -p /mydata/elasticsearch/data #3、创建Elasticsearch插件…...

编程日记 2023/8/19 3:32:00

【es6】函数参数设置默认值

1、es6之前的函数参数默认值写法 1.1、使用短路或||的写法 当y为空时&#xff0c;y判断为false &#xff0c;走||右边的&#xff0c;所以y world;当y不为空时&#xff0c;y判断为true&#xff0c;不需要再运行||右边的&#xff0c;所以 y y function log(x, y) {y y || W…...

编程日记 2023/8/19 3:30:57

Pytest和Unittest测试框架的区别？

如何区分这两者&#xff0c;很简单unittest作为官方的测试框架&#xff0c;在测试方面更加基础&#xff0c;并且可以再次基础上进行二次开发&#xff0c;同时在用法上格式会更加复杂&#xff1b;而pytest框架作为第三方框架&#xff0c;方便的地方就在于使用更加灵活&#xff0…...

编程日记 2023/8/19 3:29:56

C#基础知识（一）

一、C#程序结构 《1》命名空间的声明&#xff08;namespace declaration&#xff09; 《2》一个class 《3》class方法 《4》class属性 《5》一个main方法 《6》语句&#xff08;statements&#xff09;&表达式&#xff08;Expressions&#xff09; 《7》注释 注&#xff1a…...

编程日记 2023/8/19 3:28:54

我还不知道？Android组件化插件化模块化

Android组件化、插件化和模块化是针对Android应用程序开发的一种架构设计思想和开发方式。 组件化&#xff08;Componentization&#xff09;&#xff1a; 组件化是将一个大型的Android应用程序拆分成多个独立的组件&#xff08;Module&#xff09;&#xff0c;每个组件可以独…...

编程日记 2023/8/19 3:27:52

借助 AI 工具，真的能成为 10x 工程师？

或许你听说过 10x 工程师吗&#xff1f; 如果你问猎头公司 10x 工程师是什么意思&#xff0c;他们可能会说 “生产力”&#xff01;10x 是指完成任务比别人快 10 倍的工程师。 2019 年&#xff0c;Twitter 上就曾经对 10 x 工程师这一议题有过一次空前热烈的讨论&#xff0c;引…...

编程日记 2023/8/19 3:26:51

TypeScript 面向对象

TypeScript 接口 TypeScript 接口定义如下&#xff1a; interface interface_name { } 以下实例中&#xff0c;我们定义了一个接口 IPerson&#xff0c;接着定义了一个变量 customer&#xff0c;它的类型是 IPerson。 customer 实现了接口 IPerson 的属性和方法。 interf…...

编程日记 2023/8/19 3:25:48

k8s 中快速启动curl pod 做api test

场景 k8s上运行的pod需要进行api测试,由于开发使用的镜像都是最小化构建,不能保证现有的pod中一定有curl工具,于是需要启动一个带有curl工具的测试pod专门进行api测试 指令 kubectl run curl-test-pod --imagecurlimages/curl -n {namespace} -i --tty -- sh上述指令实现在指…...

编程日记 2023/8/19 3:24:47

神经网络基础-神经网络补充概念-56-迁移学习

迁移学习&#xff08;Transfer Learning&#xff09;是一种机器学习技术&#xff0c;旨在将在一个任务上学到的知识或模型迁移到另一个相关任务上&#xff0c;以提高新任务的性能。迁移学习的核心思想是通过利用源领域&#xff08;source domain&#xff09;的知识来改善目标领…...

编程日记 2023/8/19 3:23:45

力扣：65. 有效数字（Python3）

题目&#xff1a; 有效数字&#xff08;按顺序&#xff09;可以分成以下几个部分&#xff1a; 一个 小数 或者 整数&#xff08;可选&#xff09;一个 e 或 E &#xff0c;后面跟着一个 整数 小数&#xff08;按顺序&#xff09;可以分成以下几个部分&#xff1a; &#xff08;…...

编程日记 2023/8/19 3:22:44

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

编程新知 2025/7/5 0:21:39

蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

编程新知 2025/7/5 3:15:14

服务器硬防的应用场景都有哪些？

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

编程新知 2025/7/6 11:27:06

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

编程新知 2025/7/5 19:21:32

屋顶变身“发电站” ，中天合创屋面分布式光伏发电项目顺利并网！

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

编程新知 2025/7/5 8:11:35

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

编程新知 2025/7/6 0:51:43

深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

编程新知 2025/6/22 1:04:56

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波（Mean Shift Filtering）函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

编程新知 2025/7/5 2:23:02

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

编程新知 2025/6/27 23:02:35

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...

编程新知 2025/7/6 13:20:32