js防抖用法(JavaScript的防抖和节流案例)
类别:编程学习 浏览量:1463
时间:2021-10-23 10:52:12 js防抖用法
JavaScript的防抖和节流案例目录
- 防抖
- 节流:
防抖:在一定的时间内只执行最后一次任务;
节流:一定的时间内只执行一次;
防抖<button id="debounce">点我防抖!</button> $('#debounce').on('click', debounce()); function debounce() { let timer; // 闭包 return function () { clearTimeout(timer); timer = setTimeout(() => { // 需要防抖的操作... console.log("防抖成功!"); }, 500); } }
<button id="throttle">点我节流!</button> $('#throttle').on('click', throttle()); function throttle(fn) { let flag = true; // 闭包 return function () { if (!flag) { return; } flag = false; setTimeout(() => { console.log("节流成功!"); flag = true; }, 1000); }; }
到此这篇关于JavaScript的防抖和节流案例的文章就介绍到这了,更多相关JavaScript防抖和节流内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- js绘制平滑路径(如何利用Javascript生成平滑曲线详解)
- JavaScript中==和===的区别
- js获取子表单所有数据(JavaScript实现异步提交表单数据)
- javascript学习参数(详解JavaScript堆栈与拷贝)
- javascript文件解压(JavaScript 如何在线解压 ZIP 文件)
- js tab栏案例(JavaScript实现Tab栏切换特效)
- javascript作用域实例(JavaScript defineProperty如何实现属性劫持)
- javascript如何跨域
- javascript五大继承方式(原生Javascript实现继承方式及其优缺点详解)
- js搜索功能的实现(前端JavaScript实现本地模糊搜索功能的方法实例)
- javascript如何判断类型(JavaScript如何优化逻辑判断代码详解)
- js实现div(javascript拖曳互换div的位置实现示例)
- javascript中定义数组的方法(JavaScript中数组sort方法的基本使用与踩坑记录)
- canvas3d效果(JavaScript canvas实现七彩太阳光晕效果)
- 用javascript解析json(JavaScript JSON.stringify的使用总结)
- javascript编程中的promise(JavaScript如何利用Promise控制并发请求个数)
- 记忆中的台词(记忆中的台词)
- 袁冰妍轧戏 拍《琉璃》的同时还在拍《将夜》,难怪被骂演技差(拍琉璃的同时还在拍将夜)
- 刚红就耍大牌,《琉璃》角色滤镜碎一地,心疼工作人员(琉璃角色滤镜碎一地)
- 袁冰妍郑业成这对可以处,有脸红情话他们是真的敢说(袁冰妍郑业成这对可以处)
- 《祝卿好》台词又土又甜,就喜欢这么直接的恋爱(祝卿好台词又土又甜)
- 大女主 汤唯垂青电视圈,搭档朱亚文出演《大明皇妃孙若微传》(汤唯垂青电视圈)
热门推荐
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9