导言

主要是为了记下来, 要不然过几个月又忘记了

防抖

原理:函数在触发后 n 秒后执行 , 如果在 n 秒内在再次执行函数 , 则重新计时

主要应用场景有:

• 搜索框: 只有用户输入完毕后,过一段时间再去发起请求
• 表单提交 : 防止多次提交, 只提交最后一次

function debounce(fn , delay) {
    let timer = null;
    
    return function() {
        // 重点, 清除定时器
        if(timer) clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, arguments);
        },delay)
    }
}

节流

原理:在规定时间内,只能触发一次函数 ,如果在这个单位时间内触发多次函数,只有一次生效

function throttle(fn, delay) {
    let flag = true;
    
    return function() {
        if(!flag) return;
        flag = false;
        setTimeout(() => {
            fn.apply(this, arguments);
            flag = true;
        })
    }
}