通过原生js实现一个节流函数和防抖函数?
JS 实现 函数 一个 通过 原生 节流 防抖
2023-09-14 09:13:49 时间
防抖函数(debounce)
功能:当事件被触发N秒之后再执行回调,如果在N秒内被触发,则重新计时。
比如一个输入框,当应用实现防抖函数之后,用户不断输入内容时,函数会一直被触发,则不会发送请求。只有当用户在一段规定时间N内未进行输入操作,才会发送一次请求。如果在N秒内间断的输入内容,且间断的时间小于规定时间N时,则会重新计时且不会发送请求。
这样降低了发送请求的次数,提高性能的同时也提升了用户体验。
手写实现防抖函数
// func是用户传入需要防抖的函数
// wait是等待时间,若不传参,默认50ms
// 因为闭包,timer将一直在内存中
const debounce = (func, wait = 50) => {
// 缓存一个定时器
let timer = null;
// 返回的函数是每次用户实际调用的防抖函数
return (...args) => {
// 如果已经设定过定时器了就清空上一次的定时器
if (timer) clearTimeout(timer);
// 开始一个新的定时器,延迟执行用户传入的方法
timer = setTimeout(() => {
func.apply(this, args);
}, wait);
};
};
节流函数(throttle)
功能:规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效
实现节流函数
// func是用户传入需要防抖的函数
// wait是等待时间,若不传参,默认50ms
// 因为闭包,falg将一直在内存中
const throttle = (func, wait = 50) => {
// 定义falg,初试为true
let flag = true;
// 返回的函数是每次用户实际调用的节流函数
return (...args) => {
if (flag) {
// 如果flag为true,则执行定时器
setTimeout(() => {
func.apply(this, args);
// 函数执行完毕后,将flag改回true
// 以便下次再执行
flag = true;
}, wait);
}
// 因为定时器是异步任务,定时器执行后,立刻将flag关闭
// 在等待延时时间时,阀门始终关闭,不会一直执行函数
flag = false;
};
};
相关文章
- JS框架_(Esign.js)仿信用卡电子签名特效
- JS框架_(Bootstrap.js)实现简单的轮播图
- JS魔法堂:jQuery.Deferred(jQuery1.5-2.1)源码剖析
- js导出excel
- [Javascript] Modifying an Immutable.js Map()
- vue.js 3.2.22:用@vueuse/core实现图片懒加载(@vueuse/core@7.0.3)
- SAP UI5框架Component.js里extend函数的实现原理
- UI5 datajs.js response handling
- Atitit stomp.js conn连接activemq 目录 1.1. activemq 启动,已经默认开启了stomp ws的接口。。地址是1 1.2. Js 客户端代码1 1.3
- Atitit.js的键盘按键事件捆绑and事件调度
- Atitit。Tree文件解析器的原理流程与设计实现 java c# php js
- Atitit 文件上传 架构设计 实现机制 解决方案 实践java php c#.net js javascript c++ python
- 华为OD机试 - 最大数字(Java & JS & Python)
- 华为OD机试 - 星际篮球争霸赛(Java & JS & Python)
- 华为校招机试 - 发广播(Java & JS & Python)
- html+css+js实现自动敲文字效果
- node.js:setTimeout实现同步delay延时函数
- css+js 实现一行多个盒子块元素响应式布局
- leetcode 32. 最长有效括号 js实现
- js实现 find 函数
- js插入节点appendChild和insertBefore
- JS之BOM对象常用知识点整理
- 原生js实现随机验证码HTMl-JS
- js工具代码封装(超长)1/3
- JS工具方法 4 伪元素点击事件实现的两种方法
- js实现返回页面顶部