JS函数节流throttle和防抖debounce
Opened this issue · 0 comments
wuyuanlijie commented
函数节流和防抖
- 都是优化高频率执行js代码的的一种手段
1. 函数节流
允许一个函数在一个规定的时间内只执行一次。比如人眨眼睛,就是一定的时间内眨眼一次。
// 1、函数节流 (声明一个变量当标志位,记录当前的代码是否在执行!)
let canRun = true;
document.getElementById('throttle').onscroll = () => {
if (!canRun) {
return; // 判断是否已经空闲,如果在执行的过程中了,那么就直接return;
}
canRun = false;
setTimeout(function() {
console.log('函数节流,可以在这里执行');
canRun = true; // 判断是否能执行 这个时候函数已经执行完了 所以可以进行执行了
}, 300);
}
2. 函数防抖
- 指的是频繁触发的情况下,只要有足够的空闲时间,才执行一次代码。(等待人陆续上完车后,司机就不会开车,只有没人刷卡了,司机才会开车)。
- 最常见的就是用户的时候的手机验证和邮箱验证,只有等用户输入完毕后,前端才能检测格式是否正确。
- 要点是:需要一个setTimeout来辅助实现,延迟需要跑的代码。
let timer = null;
document.getElementById('debounce').onscroll = () => {
clearTimeout(timer); // 如果多次的触发代码,就用clearTimeout清除掉,重现开始(就像只有输入邮箱完毕后,才能去执行检测格式是否正确的代码)
timer = setTimeout(function() {
console.log('函数防抖!'); // 如果在300ms后,没有滚动了,我们可以执行里面的代码。setTimeout做一个缓冲池
}, 300)
}