您现在的位置是:首页 > Javascript
当前栏目
防抖和节流(详细) 使用场景和区别
2023-03-31 10:36:22 时间
1.防抖 (多次触发 只执行最后一次)
作用: 高频率触发的事件,在指定的单位时间内,只响应最后一次,如果在指定的时间内再次触发,则重新计算时间
防抖类似于英雄联盟回城6秒,如果回城中被打断,再次回城需要再等6秒
实现代码:
<body>
<input type="text" id="inp">
<script>
// 1.封装防抖函数
function debounce(fn, time) {
// 4.创建一个标记用来存放定时器的返回值
let timeout = null;
return function () {
// 5.每当用户触发input事件 把前一个 setTimeout 清楚掉
clearTimeout(timeout);
// 6.然后又创建一个新的 setTimeout, 这样就能保证输入字符后等待的间隔内 还有字符输入的话,就不会执行 setTimeout里面的内容
timeout = setTimeout(() => {
// 7.这里进行防抖的内容
fn();
}, time);
};
}
// 2.获取inpt元素
var inp = document.getElementById('inp');
// 8. 测试防抖临时使用的函数
function sayHi() {
console.log('防抖成功');
}
// 3.给inp绑定input事件 调用封装的防抖函数 传入要执行的内容与间隔事件
inp.addEventListener('input', debounce(sayHi, 5000));
</script>
</body>
2.节流 (规定时间内 只触发一次)
作用: 高频率触发的事件,在指定的单位时间内,只响应第一次
节流类似于英雄联盟里的英雄平A 一定是内点击多次只进行攻击一次
<script>
// 1.封装节流函数
function throttle(fn, time) {
//3. 通过闭包保存一个 "节流阀" 默认为false
let temp = false;
return function () {
//8.触发事件被调用 判断"节流阀" 是否为true 如果为true就直接trurn出去不做任何操作
if (temp) {
return;
} else {
//4. 如果节流阀为false 立即将节流阀设置为true
temp = true; //节流阀设置为true
//5. 开启定时器
setTimeout(() => {
//6. 将外部传入的函数的执行放在setTimeout中
fn.apply(this, arguments);
//7. 最后在setTimeout执行完毕后再把标记'节流阀'为false(关键) 表示可以执行下一次循环了。当定时器没有执行的时候标记永远是true,在开头被return掉
temp = false;
}, time);
}
};
}
function sayHi(e) {
// 打印当前 document 的宽高
console.log(e.target.innerWidth, e.target.innerHeight);
}
// 2.绑定事件,绑定时就调用节流函数
// 敲黑板!!! 这里是重点 绑定是就要调用一下封装的节流函数 触发事件是触发封装函数内部的函数
window.addEventListener('resize', throttle(sayHi, 2000));
</script>
防抖和节流的使用场景
防抖(debounce)
1.search搜索时,用户在不断输入值时,用防抖来节约请求资源。
节流(throttle)
1.鼠标不断点击触发,mousedown(单位时间内只触发一次)
2.监听滚动事件,比如是否滑到底部自动加载更多,用throttle来判断
相关文章
- 彻底搞清楚 JavaScript 的原型和原型链 Object.prototypeObject.__proto __小结共同点特例
- 听说你还不会虚拟列表?原谅我来晚了
- LRU缓存-keep-alive实现原理
- 使用 CSS 轻松实现一些高频出现的奇形怪状按钮
- Gin 框架: 通过 Web 获取服务元信息
- 最新研究指出:Node.js 的 VM2 沙箱易受原型污染攻击
- Node.js 易受新型 HTTP 请求夹带技术攻击
- 滴滴 D8 前端技术大牛是如何思考个人成长的?
- html爱心表白代码(最全html表白代码大全可复制)
- 一个非常是个程序员表白的浪漫网站(HTML+CSS+JS)
- 【爱心跳动——HTML实现 (效果+代码)】
- html爱心表白代码(最全)
- HTML5七夕情人节表白结婚邀请函网页制作(HTML+CSS+JavaScript)
- HTML情人节表白代码,给女朋友的电子情书代码,女朋友表白代码
- 【博主推荐】HTML浪漫表白求爱(附源码)
- html情人节代码,2023年情人节代码,含鼠标特效的2023情人节代码
- Web的8种(6+2)元素+常用定位方法
- html程序员表白前端网页源码
- 浪漫爱心表白网页模板
- 情人节程序员用HTML网页表白【守护爱情(泡泡游戏)】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript