博客
关于我
JS实现防抖与节流(使用按钮触发事件)
阅读量:569 次
发布时间:2019-03-09

本文共 1151 字,大约阅读时间需要 3 分钟。

JS实现防抖与节流(按钮触发事件)

引言:

手写JS的防抖与节流

防抖(Debounce)和节流(Throttle)是前端开发中常见的需求,用于避免事件过于频繁地触发。在实际项目中,尤其是涉及用户交互的表单或实时数据处理时,这两种技术能大大提升用户体验。以下是实现防抖与节流的JS代码示例。

防抖代码示例:

function debounce(fn, wait) {    let task = null;    return function () {        if (task) {            console.log('清除计时器');            clearTimeout(task);        }        task = setTimeout(() => {            console.log('设置了计时器');            fn.apply(this, arguments);        }, wait);    };}function fun1() {    console.log('btn1的函数执行了');}var btn1 = document.getElementById('debounce');btn1.addEventListener("click", debounce(fun1, 2000));

节流代码示例:

function throttle(fn, wait) {    let task = null;    return function () {        if (!task) {            console.log('设置了task定时器');            task = setTimeout(() => {                task = null;                fn.apply(this, arguments);            }, wait);        }    };}function fun2() {    console.log('btn2的函数执行了');}var btn2 = document.getElementById('throttle');btn2.addEventListener('click', throttle(fun2, 2000));

执行效果:

在实际操作中,您可以看到防抖按钮(id="debounce")在快速点击时不会连续多次执行函数fun1,而节流按钮(id="throttle")在短时间内同样不会多次触发fun2。这种设计能够有效减少不必要的事件处理,提升用户体验。

转载地址:http://gdxpz.baihongyu.com/

你可能感兴趣的文章
mysql 字段区分大小写
查看>>
mysql 字段合并问题(group_concat)
查看>>
mysql 字段类型类型
查看>>
MySQL 字符串截取函数,字段截取,字符串截取
查看>>
MySQL 存储引擎
查看>>
mysql 存储过程 注入_mysql 视图 事务 存储过程 SQL注入
查看>>
MySQL 存储过程参数:in、out、inout
查看>>
mysql 存储过程每隔一段时间执行一次
查看>>
mysql 存在update不存在insert
查看>>
Mysql 学习总结(86)—— Mysql 的 JSON 数据类型正确使用姿势
查看>>
Mysql 学习总结(87)—— Mysql 执行计划(Explain)再总结
查看>>
Mysql 学习总结(88)—— Mysql 官方为什么不推荐用雪花 id 和 uuid 做 MySQL 主键
查看>>
Mysql 学习总结(89)—— Mysql 库表容量统计
查看>>
mysql 实现主从复制/主从同步
查看>>
mysql 审核_审核MySQL数据库上的登录
查看>>
mysql 导入 sql 文件时 ERROR 1046 (3D000) no database selected 错误的解决
查看>>
mysql 导入导出大文件
查看>>
MySQL 导出数据
查看>>
mysql 将null转代为0
查看>>
mysql 常用
查看>>