js 防抖函数、节流函数

/** 节流函数 */
export function throttle(func, wait = 100) {
	let isDoing = false
	return function (...rest) {
		if (isDoing) return
		isDoing = true
		
		setTimeout(() => {
		    func(...rest)
			isDoing = false
		}, wait)
	}
}

/** 防抖函数 */
export function debounce(func, wait = 100) {
	let timer = 0
	return function (...rest) {
		clearTimeout(timer)
		timer = setTimeout(func, wait, ...rest)
	}
}
//测试
function throttle(func, wait = 100) {
	let isDoing = false
	return function (...rest) {
		if (isDoing) return
		isDoing = true
		setTimeout(() => {
			func(...rest)
			isDoing = false
		}, wait)
	}
}

function debounce(func, wait = 100) {
	let timer = 0
	return function (...rest) {
		clearTimeout(timer)
		timer = setTimeout(func, wait, ...rest)
	}
}

const normalFn = (e) => {
	console.log('normalFn', e)
}

const throttleFn = throttle((e) => {
	console.warn('throttleFn', e)
}, 100)

const debounceFn = debounce((e) => {
	console.error('debounceFn', e)
}, 200)

window.addEventListener('resize', (e) => {
	normalFn('params ' + Date.now())
	throttleFn('params ' + Date.now())
	debounceFn('params ' + Date.now())
})

效果图
请添加图片描述

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

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

相关文章

微信小程序开发:地图路线规划全流程,超详细!!!(包括遇到的问题解决)

目录 效果展示 第一章 准备阶段 1.1 使用uniapp搭建微信小程序 1.2 条件1:appId(微信小程序appId) 1.3 条件2:key(腾讯位置服务申请的key) 1.4 条件3:插件appId(微信小程序插件…

C语言每日一题(41)循环队列

力扣 622 循环队列 题目描述 设计你的循环队列实现。 循环队列是一种线性数据结构,其操作表现基于 FIFO(先进先出)原则并且队尾被连接在队首之后以形成一个循环。它也被称为“环形缓冲器”。 循环队列的一个好处是我们可以利用这个队列之前…

分布式版本管理系统---->Git(Linux---centos(保姆式)讲解1)

文章目录: 1:什么是Git以及作用 2.Git的基本操作过程(创建git仓库,配置仓库的配置) 3.git的工作区,暂存区,版本库的关系 4.将文件添加到版本库:git add 与git commit -m命令 5.git log查看日志的引入 6.查看.git文件中的内容 7.修改文件内容查…

图扑数字孪生压缩空气储能管控平台

压缩空气储能在解决可再生能源不稳定性和提供可靠能源供应方面具有重要的优势。压缩空气储能,是指在电网负荷低谷期将电能用于压缩空气,在电网负荷高峰期释放压缩空气推动汽轮机发电的储能方式。通过提高能量转换效率、增加储能密度、快速启动和调节能力…

探索什么样的导线,适合做433的天线

​​​​​​一、理论基础 (3 封私信 / 18 条消息) 为什么天线的材质会影响接收电磁波的效果? - 知乎 (zhihu.com) 电感基础3——RLC电路,帮助你轻松理解“阻抗”的概念 - 知乎 (zhihu.com) 一文读懂介电性能---介电常数 - 知乎 (zhihu.com) 433MHz 至…

亚马逊,shopee,lazada自养号测评补单,保护店铺信誉提升自然流量

测评补单对跨境电商卖家来说,是运营店铺的重要手段之一。一个产品想要有更好的曝光、更高的转化率,需要有一个好的Listing排名。Review在各平台Listing中占据着较高的权重,一个好的Review能给用户带来良好的观感,使用户对产品的信…

【EI会议征稿】第五届人工智能、网络与信息技术国际学术会议(AINIT 2024)

第五届人工智能、网络与信息技术国际学术会议(AINIT 2024) 第五届人工智能、网络与信息技术国际学术会议(AINIT 2024)将于2024年3月22-24日在中国南京举行。本届会议将主要关注人工智能、网络与信息技术面临的新的挑战问题和研究…

使用 kubeadm 部署 Kubernetes 集群(三)kubeadm 初始化 k8s 证书过期解决方案

一、延长k8s证书时间 查看 apiserver 证书有效时间:默认是一年的有效期 [rootxuegod63 ~]# openssl x509 -in /etc/kubernetes/pki/apiserver.crt -noout -text |grep Not 延长证书过期时间 1.把 update-kubeadm-cert.sh 文件上传到 xuegod63 节点 vim update-…

写给初学者的 HarmonyOS 教程 -- 页面路由(router)

页面路由(router)是指在应用程序中实现不同页面之间的跳转和数据传递。 HarmonyOS 提供了 Router 模块,通过不同的 url 地址,可以方便地进行页面路由,轻松地访问不同的页面。 类似这样的效果: 页面跳转是…

代理服务器如何保护用户隐私和安全?

目录 前言 一、代理服务器的工作原理 二、代理服务器的隐私保护机制 1. IP地址隐藏 2. 安全加密 3. 访问控制 三、代理服务器的安全问题 1. 黑客攻击 2. 版本漏洞 3. 恶意软件 四、总结 前言 代理服务器是一种位于用户与服务器之间的中介,可以隐藏用户的…

VSCode 配置JavaScript环境

首先下载node.js,我的电脑是Windows10版本 之后安装node 在这里插入图片描述 安装成功 如果发现运行的时候还是报错,则添加环境变量试试 在Windows10版本的搜索框,搜索环境变量,点击 D:\Program Files\nodejs\ %NODE_HOME…

并行流(Parallel Streams)

并行流(Parallel Streams)是Java 8引入的一种并行处理集合数据的机制,它允许将操作并行化以提高处理速度。然而,并行流可能存在一些安全问题,特别是在多线程环境下。 以下是一些与并行流相关的安全问题: 共…

实现简单的Http服务器+SpringMvc,集成到Spring

实现简单的Http服务器SpringMvc,集成到Spring 1、Http协议 1.1、HTTP 协议请求格式 方法 空格 URL 空格 版本 回车符 换行符头部域名称:头部域值 回车符 换行符...头部域名称:头部域值 回车符 …

【部署】Deploying Trino on linux

文章目录 一. Requirements1. Linux operating system2. Java 环境3. Python 二. Installing Trino三. Configuring Trino1. 节点配置2. JVM 配置3. Config properties4. Log levels5. Catalog properties 四. Running Trino 一. Requirements 1. Linux operating system 64位…

鸿蒙Harmony开发初探

一、背景 9月25日华为秋季全场景新品发布会,余承东宣布鸿蒙HarmonyOS NEXT蓄势待发,不再支持安卓应用。网易有道、同程旅行、美团、国航、阿里等公司先后宣布启动鸿蒙原生应用开发工作。 二、鸿蒙Next介绍 HarmonyOS是一款面向万物互联,全…

查询绑定了所有id的name

1、如图,绑定了所有id的有A,B两个name 2、第一种Sql及效率 explain SELECT name,count(id) as count from test GROUP BY name HAVING count(id)(SELECT count(DISTINCT id) from test); 3、第二种sql及效率 explain select * from (SELECT name,count(id) as co…

软著项目推荐 深度学习的智能中文对话问答机器人

文章目录 0 简介1 项目架构2 项目的主要过程2.1 数据清洗、预处理2.2 分桶2.3 训练 3 项目的整体结构4 重要的API4.1 LSTM cells部分:4.2 损失函数:4.3 搭建seq2seq框架:4.4 测试部分:4.5 评价NLP测试效果:4.6 梯度截断…

柔性线路板市场分析:预计2028年将达到221亿美元

柔性电路板又称“软板”,是用柔性的绝缘基材制成的印刷电路。柔性电路提供优良的电性能,能满足更小型和更高密度安装的设计需要,也有助于减少组装工序和增强可靠性。柔性电路板是满足电子产品小型化和移动要求的惟一解决方法。可以自由弯曲、…

360公司-2019校招笔试-Windows开发工程师客观题合集解析

360公司-2019校招笔试-Windows开发工程师客观题合集 API无法实现进程间数据的相互传递是PostMessage2.以下代码执行后,it的数据为(异常) std::list<int> temp; std::list<int>::iterator it = temp.begin(); it = --it; 3.API在失败时的返回值跟其他不一样是 …

会话 cookie 及隐私的那些事

什么是会话 Cookie? 会话 Cookie 的概念非常简单。 会话 Cookie,也称为临时 Cookie 或内存 Cookie,是网站在浏览会话期间存储在用户计算机或设备上的小数据片段。 它是由网站生成并由您的浏览器存储和使用的多种 Cookie 之一。 常规 Cookie 或“持久”Cookie 是通常在您的…