节流函数和防抖函数的区别和应用

函数节流

一个函数执行一次后，只有大于设定的执行周期才会执行第二次。

function throttle(func, ms = 1000) {
    
    
    //标记是否可以执行
    let canRun = true;
    return function (...args) {
    
    
        //不可执行
        if (!canRun) return;
        //执行后设置不可执行
        canRun = false;
        //设置执行周期
        setTimeout(() => {
    
    
            func.apply(this, args);
            //重置标记
            canRun = true;
        }, ms);
    }
}

测试 ：

const task = () => {
    
     console.log('run task') };
const throttleTask = throttle(task, 1000);
//鼠标连续点击，在设置的执行周期内只会触发一次
window.addEventListener('click', throttleTask);

应用：

• 滚动加载，加载更多或滚动到底部监听
• 搜索框，搜索联想功能
• 高频点击提交，表单重复提交

函数防抖

一个需要频繁触发的函数 在规定事件内 只让最后一次生效 前面的不生效

function debounce(func, ms = 1000) {
    
    
    //定时器ID
    let timer;
    return function (...args) {
    
    
        //清除定时器
        if (timer) {
    
    
            clearTimeout(timer);
        }
        //设置函数执行时间
        timer = setTimeout(() => {
    
    
        	func.apply(this, args);
        }, ms);
    }
}

测试 ：

const task = () => {
    
     console.log('run task') };
const debounceTask = debounce(task, 1000);
//鼠标连续点击，只会触发最后一次
window.addEventListener('click', debounceTask);

应用 :

• 手机号、邮箱正则输入检测
• 搜索框输入：用户最后一次输入完，再发送请求
• 窗口大小：窗口调整完成后，计算窗口大小，防止重复渲染