手写防抖函数(主要业务代码不含格式校验)

// 防抖的主要思想在于：我会等你到底。
// 在某段时间内，不管你触发了多少次回调，我都只认一次(可以在开始边界或结束边界执行)

// 1.简单的防抖效果(与业务相结合) 一秒内多次点击只触发一次
// const btn = document.querySelector(".submit");
// let count = 0,
//   isRun = false;

// // 给按钮绑定的点击事件 参数e为事件对象
// const handle = function handle(e) {
//   if (isRun) return;
//   isRun = true;
//   setTimeout(() => {
//     console.log(++count);
//     btn.classList.add('disable')
//     isRun = false;
//   }, 1000);
// };

// // 注册事件
// btn.addEventListener("click", handle);

// 2.通用的防抖处理方案(脱离业务)
const btn = document.querySelector(".submit");
let count = 0

// 给按钮绑定的点击事件 参数e为事件对象
const handle = function handle(e) {
    // this e.........
    console.log(++count);
};

// 注册事件
btn.onclick = debounce(handle,500)

// 清除延时器
/*
    清除延时器的原理
    1.设置延时器时,timer=setTimeout(...),这里的timer是个数字,
    代表是在系统中是第几个延时器
    2.clearTimeout(timer)清楚延时器时,只会把系统中的对应的第几个延时器清楚,
    但是timer还是原来的数字并不会变为null
*/
function clearTimer(timer){
    if (timer) {
        clearTimeout(timer)
    }
    return null
}

// 防抖函数
function debounce(func,wait,immediate){
    let timer = null // 这里外部的函数只会触发一次
    // 每次点击时触发的是返回的这个内部的匿名函数
    return function(...params){
        // 判断是不是第一次触发定时器
        let now = !timer && immediate
        timer = clearTimer(timer)
        timer = setTimeout(()=>{
            // 改变func函数调用时 内部的this指向,以及将参数传递给func(结束边界触发)
            !immediate ? func.call(this,...params) : null
            // 执行完成后要把这个延时器给清除掉
            timer = clearTimeout(timer)
        },wait)
        // 开始边界触发 直接执行func
        if(now) func.call(this,...params)
    }
}