JS实现,防抖节流 + 闭包

防抖(Debounce)

防抖是指短时间内大量触发同一事件,只会在最后一次事件完成后延迟执行一次函数。

防抖的典型应用场景是输入框的搜索建议功能,用户输入时不需要每次输入都去查询,而是在用户停止输入一段时间后才进行查询。

function debounce(fn, delay) {let timer = nullreturn function (...args) {if (timer) clearTimeout(timer)timer = setTimeout(() => {timer = nullfn.apply(this, args)}, (delay + '') | 0 || 1000 / 60)}
}
  • 为什么每次调用这个函数的时候,timer都是同一个?
    涉及到了闭包的概念,使得返回的函数能够持续访问和修改 timer 变量,这是实现防抖功能的关键。
  • …args是什么
    称为“rest参数”(rest parameters)
    注意:① …args 会将所有传入的参数收集到一个名为 args 的数组中。② 这个数组包含了所有传递给函数的参数,无论传入多少个参数。
  • this
    this 是一个关键字,它指向函数执行时的上下文对象。
    在这里插入图片描述
  • 在 JavaScript 中,apply 函数是存在的,它是 Function 对象的一个方法。apply 允许你调用一个函数,并指定函数的 this 值,同时传递一个参数数组给函数。
  • delay

(delay + '') | 0 || 1000 / 60
delay + ‘’:这部分将 delay 转换为字符串(通过隐式类型转换)。如果 delay 已经是一个数字,这个操作不会改变它的值,但如果 delay 是其他类型(如字符串或 null),它将被转换为字符串。
| 0:这是一个按位或操作,它将字符串转换为一个整数。在 JavaScript 中,任何与 0 进行按位或操作的字符串都会被转换为该字符串的数值表示(如果可能)。如果字符串不是一个有效的数字,结果将是 0。
|| 是逻辑或操作符。如果前面的表达式((delay + ‘’) | 0)的结果是 0 或 null 或 undefined 或任何其他假值,那么逻辑或操作符将评估并返回后面的表达式(1000 / 60)。

节流(Throttle)

节流是指在指定的时间间隔内,只允许函数执行一次,不管事件触发了多少次。这可以确保在给定的时间间隔内,函数只执行一次。

function throttle(fn, interval) {let timer = nullreturn function (...args) {if (timer) returntimer = setTimeout(() => {timer = nullfn.apply(this, args)}, (interval +'')| 0 || 1000 / 60)}
}

防抖&节流中的this

在 JavaScript 中,this 是一个关键字,它指向函数执行时的上下文对象。函数的 this 值是在调用时确定的,而不是在定义时确定的。这意味着同一个函数在不同的调用方式下,this 的值可能不同。

在 JavaScript 中,函数可以作为一个对象的方法被调用,这时 this 会指向那个对象。例如:

const obj = {myMethod: function() {console.log(this);}
};obj.myMethod(); // 输出 obj 对象

在 debounce 函数中,this 的使用是为了确保当返回的函数被调用时,它能够保持与原始函数 fn 相同的上下文。这通常是为了让 fn 能够访问到它被调用时的对象。

const obj = {value: 42,getValue: function() {console.log(this.value);}
};const debouncedGetValue = debounce(obj.getValue, 300);// 假设我们通过事件监听器调用 debouncedGetValue
document.addEventListener('click', debouncedGetValue);

闭包 closure

闭包=内层函数+引用的外层函数变量

function createCounter() {let count = 0;return function() {count += 1;console.log(count);};
}const counter = createCounter();
counter(); // 输出 1
counter(); // 输出 2

在这个例子中,createCounter 函数创建了一个局部变量 count 和一个内部函数。内部函数访问并修改了 count 变量。当 createCounter 函数执行完毕后,通常 count 变量应该被垃圾回收。但由于返回的内部函数形成了一个闭包,它仍然保持着对 count 变量的引用,因此 count 变量不会被回收,直到闭包被销毁。

应用

  • 闭包的形式-统计函数调用的次数

不是闭包的写法:(i属于全局变量,如果在全局修改之后会有问题)

let i=0
function fn() {i++console.log(`函数被调用了${i}`)
}

闭包写法,实现数据私有

function count() {let i=0function fn() {i++console.log(`函数被调用了${i}`)}return fn
}const res = count()
res() // 1
res() // 2

问题-内存泄漏

在这里插入图片描述

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

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

相关文章

1.每日SQL----2024/11/7

题目: 计算用户次日留存率,即用户第二天继续登录的概率 表: iddevice_iddate121382024-05-03232142024-05-09332142024-06-15465432024-08-13523152024-08-13623152024-08-14723152024-08-15832142024-05-09932142024-08-151065432024-08-131123152024-…

WPF中如何简单的使用MvvmLight创建一个项目并进行 增删改查

目录 第一步:创建项目后下载如下两个NuGet程序包,然后删除删掉using Microsoft.Practices.ServiceLocation; 并且引入using CommonServiceLocator; 第二步:删除原来的XAML文件并创建如下的包结构然后创建一个在View文件夹中创建一个Main窗体 …

网页版五子棋——匹配模块(客户端开发)

前一篇文章:网页版五子棋——用户模块(客户端开发)-CSDN博客 目录 前言 一、前后端交互接口设计 二、游戏大厅页面 1.页面代码编写 2.前后端交互代码编写 3.测试获取用户信息功能 结尾 前言 前面文章介绍完了五子棋项目用户模块的代码…

elasticSearch 7.12.1 Docker 安装ik分词

一、下载 https://github.com/infinilabs/analysis-ik/releases/tag/v7.12.1 将文件解压,复制到docker挂载的目录 docker ps#重启docker docker restart f7ec58e91f1f 测试 GET _analyze?pretty {"analyzer": "ik_max_word","text&qu…

在JS中, 0 == [0] 吗

在不知道答案的情况下, 你觉得这段代码的输出是什么 我当时觉得是false, 结果我错了–^^– 那为什么输出是true呢 因为的隐式类型转换, 运算符会尝试将两个操作数转换为相同的类型,然后再进行比较。 在这个例子中,0 是一个数字,而 [0] 是…

【学习AI-相关路程-mnist手写数字分类-win-硬件:windows-自我学习AI-实验步骤-全连接神经网络(BPnetwork)-操作流程(3) 】

【学习AI-相关路程-mnist手写数字分类-win-硬件:windows-自我学习AI-实验步骤-全连接神经网络(BPnetwork)-操作流程(3) 】 1、前言2、前置学习(1)window和Linux中python寻找目录的方式。&#x…

RabbitMQ客户端应用开发实战

这一章节我们将快速完成RabbitMQ客户端基础功能的开发实战。 一、回顾RabbitMQ基础概念 这个RabbitMQ的核心组件,是进行应用开发的基础。 二、RabbitMQ基础编程模型 RabbitMQ提供了很多种主流编程语言的客户端支持。这里我们只分析Java语言的客户端。 上一章节提…

一文了解Android SELinux

在Android系统中,SELinux(Security-Enhanced Linux)是一个增强的安全机制,用于对系统进行强制访问控制(Mandatory Access Control,MAC)。它限制了应用程序和进程的访问权限,提供了更…

python画图|hist()函数深层体验

【1】引言 前述学习已经掌握hist()函数的基本运用技巧,可通过下述链接直达: python画图|hist()函数画直方图初探-CSDN博客 python画图|hist()函数画直方图进阶-CSDN博客 我们已经理解hist()函数本质上画的是概率分布图,相关知识属于数理统…

火狐浏览器同源策略禁止解决方案

前言 火狐浏览器同源策略禁止解决方案_同源策略禁止读取远程资源怎么办-CSDN博客 在使用Firefox火狐浏览器进行Web开发时,有时会遇到因为同源策略(Same-Origin Policy)导致的跨域请求被拦截的问题。例如,控制台可能会显示如下错…

计算机网络——TCP篇

TCP篇 基本认知 TCP和UDP的区别? TCP 和 UDP 可以使用同一个端口吗? 可以的 传输层中 TCP 和 UDP在内核中是两个完全独立的软件模块。可以根据协议字段来选择不同的模块来处理。 TCP 连接建立 TCP 三次握手过程是怎样的? 一次握手:客户端发送带有 …

解决ImportError: DLL load failed while importing _message: 找不到指定的程序。

C:\software\Anoconda\envs\yolov5_train\python.exe C:\Project\13_yolov5-master\train.py C:\software\Anoconda\envs\yolov5_train\lib\site-packages\torchvision\io\image.py:13: UserWarning: Failed to load image Python extension: [WinError 127] 找不到指定的程序…

AOSP沙盒android 11

这里介绍一下aosp装系统 什么是aosp AOSP(Android Open Source Project)是Android操作系统的开源版本。 它由Google主导,提供了Android的源代码和相关工具,供开发者使用和修改。 AOSP包含了Android的核心组件和API,使…

git提交冲突的原因及解决方案

一、场景一 1.冲突原因 提交者的版本库 < 远程库 要保障提交者的版本库信息和远程仓库是一致的 2.解决方案 实现本地同步git pull,再提交代码&#xff08;最好每次git push之前都git pull一下&#xff0c;防止这种情况的出现&#xff09; 场景二 1.冲突原因 别人跟你…

第十五届蓝桥杯C/C++B组题解——数字接龙

题目描述 小蓝最近迷上了一款名为《数字接龙》的迷宫游戏&#xff0c;游戏在一个大小为N N 的格子棋盘上展开&#xff0c;其中每一个格子处都有着一个 0 . . . K − 1 之间的整数。游戏规则如下&#xff1a; 从左上角 (0, 0) 处出发&#xff0c;目标是到达右下角 (N − 1, N …

得物多模态大模型在重复商品识别上的应用和架构演进

重复商品治理介绍 根据得物的平台特性&#xff0c;同一个商品在平台上不能出现多个链接&#xff0c;原因是平台需要保证一品一链的特点&#xff0c;以保障商品的集中竞价&#xff0c;所以说一个商品在整个得物平台上只能有一个商详链接&#xff0c;因此我们需要对一品多链的情…

盘点2024年惊艳的10款录屏工具!!

你是否经常需要捕捉电脑屏幕上的精彩瞬间&#xff1f;或者想要记录自己操作某个应用程序的流程&#xff1f;这时候你就需要一款录屏工具啦&#xff01;在学习、工作和娱乐中&#xff0c;录屏工具都能成为你的得力助手。无论你是做教学视频、游戏解说还是分享精彩瞬间&#xff0…

vue+websocket实现即时聊天平台

目录 1 什么是websocket 2 实现步骤 2.1 导入依赖 2.2 编写代码 1 什么是websocket WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它主要用于在客户端和服务器之间建立持久的连接&#xff0c;允许实时数据交换。WebSocket 的设计目的是为了提高 Web 应用程序的…

软件设计师-上午题-15 计算机网络(5分)

计算机网络题号一般为66-70题&#xff0c;分值一般为5分。 目录 1 网络设备 1.1 真题 2 协议簇 2.1 真题 3 TCP和UDP 3.1 真题 4 SMTP和POP3 4.1 真题 5 ARP 5.1 真题 6 DHCP 6.1 真题 7 URL 7.1 真题 8 浏览器 8.1 真题 9 IP地址和子网掩码 9.1 真题 10 I…

C++:map 和 set 的使用

前言 平衡二叉搜索树 ( AVL树 ) 由于二叉搜索树在特殊情况下&#xff0c;其增删查的效率会降低到 O ( N )&#xff0c;因此对二叉搜索树进行改良&#xff0c;通过旋转等方式将其转换为一个左右均衡的二叉树&#xff0c;这样的树就称为平衡二叉搜索树&#xff0c;又称 AVL树。…