js 节流和防抖
2024-01-08 23:55:07
1 节流
可以形象理解为“节约流量”防止事件高频触发
作用
将高频触发变为低频触发
场景
- 降低resize等事件触发频率
- 无限加载场景下,定期触发
代码
function throttle(fn, delay = 100) {
let timer = null;
return function() {
if (timer) return;
timer = setTimeout(() => {
fn.apply(this, arguments);
timer = null
}, delay)
}
}
2 防抖
可以形象理解为“防止抖动(手抖)”导致事件多次触发
作用
将多次触发变为最后一次触发
场景
- 防止表单重复提交
- 防止事件多次触发
代码
function debounce(fn, delay = 100) {
let timer = null;
return function() {
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
fn.apply(this, arguments);
timer = null
}, delay)
}
}
文章来源:https://blog.csdn.net/weixin_56624286/article/details/135467991
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!