节流、防抖

1. 节流

• 一种常用的性能优化技术，可以限制函数的执行频率，避免过多的重复操作，提升页面的响应速度；
• 函数在n秒内只执行一次，如果多次触发，则忽略执行；

• 应用场景：拖拽场景；scroll场景；窗口大小调整

function throttle(func, delay) {
    let lastCallTime = 0;
    return function (...args){
        const now = new Date().getTime();
        if (now - lastCallTime >= delay) {
            func.apply(this, args);
            lastCallTime = now;
        }
    }
}
// 滚动事件节流
window.addEventListener('scroll', throttle(() => {
    console.log('滚动事件处理');
}, 500))

// 输入框事件节流
const input = document.getElementById('myInput');
input.addEventListener('input', throttle((e) => {
    console.log($e.target.value)
}, 300))

// 拖拽节流
const draggable = document.getElementById('draggable');
draggable.addEventListener('mousedown', (e) => {
    let startX = e.clientX;
    let startY = e.clientY;
    // 当拖拽元素时，通过节流函数限制 mousemove 事件处理函数的执行频率，避免过于频繁的更新元素位置，从而提高性能和减少不必要的计算。
    document.addEventListener('mousemove', throttle((e) => {
        let distanceX = e.clientX - startX;
        let distanceY = e.clientY - startY;
        draggable.style.left = draggable.offsetLeft + distanceX + 'px';
        draggable.style.top = draggable.offsetTop + distanceY + 'px';
        startX = e.clientX;
        startY = e.clientY;
    }, 100))
});
document.addEventListener('mouseup', () => {
    document.removeEventListener('mousemove')
})

// 窗口大小改变节流
function handleResize(){
    console.log(${window,innerWidth}, ${window.innerHeight})
}
window.addEventListener('resize', throttle(handleResize. 500))

2. 防抖

• 防抖函数可以将多次高频率触发的函数执行合并成一次，并在指定的时间间隔后执行一次，通常在处理输入框、滚动等事件时使用，避免频繁触发事件导致页面卡顿等问题；
• 函数在n秒后再执行，如果n秒内被触发，重新计时，保证最后一次触发事件n秒后才执行；
• 应用场景：输入框搜索、表单提交按钮、文本器保存

function debounce(func, delay) {
    let timer;
    return function (...args) {
        clearTimeout(timer);
        timer = setTimeout(() => {
            func.apply(this, args);
        }, delay)
    }
}

// 输入框事件防抖
function handleInputChange(e){
    console.log(${e.target.value});
}
const inputBox = document.getElementById('inputBox');
inputBox.addEventListener('input', debounce(handleInputChange, 500));

// 表单提交防抖
function handleFormSubmit(event){
    event.preventDefault();
    console.log('表单提交');
}
const form = document.getElementById('myForm');
form.addEventListener('submit', debounce(handleFormSubmit, 1000))

// 文本器保存防抖
function saveContent() {
    const content = document.getElementById('editor').value;
    console.log(content);
}
const saveBtn = document.getElementById('savebtn');
saveBtn.addEventListener('click', debounce(saveContent, 1000))

---

---

---

---

---

---

参考&感谢各路大神

• 性能优化