JavaScript防抖和节流
概念
函数防抖和函数节流,两者都是优化高频率执行js代码的一种手段。
-
防抖:就是一定时间内,只会执行最后一次任务;
-
节流:就是一定时间内,只执行一次 ;
防抖
<button id="debounce">点我防抖!</button>
<script>
$('#debounce').on('click', debounce());
function debounce() {
let timer; // 使用闭包,多次调用都能访问到同一个变量,而不是生成新的变量
return function () {
clearTimeout(timer);
timer = setTimeout(() => {
// 需要防抖的操作...
console.log("防抖成功!");
}, 500);
}
}
</script>
函数防抖的应用场景,最常见的就是页面滚动条监听的例子,来进行解析:
let timer;
window.onscroll = function () {
clearTimeout(timer);
timer = setTimeout(function () {
//滚动条位置
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log('滚动条位置:' + scrollTop);
}, 200)
}
防抖函数的封装使用
// 防抖函数
function debounce(fn,delay) {
let timer;
return function () {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this,arguments);
},delay);
}
}
window.onscroll = debounce(function () {
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log('滚动条位置:' + scrollTop);
},200)
// jq
$(window).on('scroll', debounce(function () {
console.log("防抖成功!");
}, 200))
节流
<button id="throttle">点我节流!</button>
<script>
$('#throttle').on('click', throttle());
function throttle(fn) {
let flag = true;
// 使用闭包,方法多次调用都能访问到同一个变量,而不是生成新的flag变量
return function () {
if (!flag) { return; }
flag = false;
setTimeout(() => {
console.log("节流成功!");
flag = true;
}, 1000);
};
}
</script>
函数节流应用的实际场景,根据文本框中输入的内容自动请求后台数据。
节流函数的封装使用
<input type="text" value="" id="input">
<script>
// 节流函数
function throttle(fn, delay) {
let flag = true;
return function () {
if (!flag) { return; }
flag = false;
setTimeout(() => {
fn.apply(this, arguments);
flag = true;
}, delay);
}
}
$('#input').on('keyup', throttle(function () {
console.log($(this).val());
// ajax后台请求....
}, 1000));
</script>
本文作者:猫老板的豆
本文链接:https://www.cnblogs.com/bingcola/p/16499199.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步