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>
