JS 防抖和节流 简单写法

JS 防抖和节流

• 防抖 （两种写法）
• 节流
• 时间戳

//防抖  指触发事件后再n秒内函数只执行一次，若在n秒内再次触发则重新计算
//         点击按钮，2秒后调用函数，在1.5秒的时候点了
function debounce(func,wait) {
    let timeOut;
    return function () {
        if (timeOut) clearTimeout(timeOut);
        timeOut = setTimeout(()=>{
            func.apply(this)
        },wait)
    }
}
//防抖  输入完毕后立即查询，过2秒才能再次查询
function debounce1(func,wait) {
    let timeOut;
    return function () {
        if (timeOut)clearTimeout(timeOut); //取消之前的任务
        let callNow = !timeOut; //类型转换
         timeOut = setTimeout(()=>{ //增加一个定时器
             timeOut = null;  //清空当前定时器
         },wait)
        if (callNow)func.apply(this); //第一次执行
    }
}
//节流  固定的时间去发请求  连续发生的事件在n秒内只执行一次函数
function throttle(func,wait) {
    let timeOut; // 定义一个定时器
    return function () {
        if (!timeOut){ //是否存在定时器
            timeOut = setTimeout(()=>{ //创建一个定时器
                timeOut = null;
                func.apply(this) //全局作用域
            },wait)
        }
    }
}
//时间戳
function throttle1(func,wait) {
    let prev = 0; //上次记录的时间
    return function () {
        let now = Date.now(); //当前的时间
        if(now - prev > wait){  //当前的时间 - 上次时间 》 等待时间
            func.apply(this); //执行函数
            prev = now;  //重置上次的记录时间
        }
    }
}