js 防抖和节流（学习笔记）

/**
 * @desc 函数节流 （牛逼版本）
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param type 1 表时间戳版，2 表定时器版
 */
function throttle(func, wait ,type) {
    if(type===1){
        let previous = 0;
    }else if(type===2){
        let timeout;
    }
    return function() {
        let context = this;
        let args = arguments;
        if(type===1){
            let now = Date.now();

            if (now - previous > wait) {
                func.apply(context, args);
                previous = now;
            }
        }else if(type===2){
            if (!timeout) {
                timeout = setTimeout(() => {
                    timeout = null;
                    func.apply(context, args)
                }, wait)
            }
        }
    }
}

/**
 * @desc 函数防抖 （牛逼版本）
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param immediate true 表立即执行，false 表非立即执行 
 * @param 防抖只会在事件结束后执行一次处理函数 immediate则用来判断是否直接执行处理函数（func.apply()） 或 延迟执行(setTimeout(()=>{func.apply()},args))
 */
function debounce(func,wait,immediate) {
    let timeout;

    return function () {
        let context = this;
        let args = arguments;

        if (timeout) clearTimeout(timeout);
        if (immediate) {
            var callNow = !timeout;
            timeout = setTimeout(() => {
                timeout = null;
            }, wait)
            if (callNow) func.apply(context, args)
        }
        else {
            timeout = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
    }
}

// 节流 （简易版）： 解释：节流 在事件触发后会执行N次 间隔对应的时间就会执行一次
例子：设置对应时间为1 则事件触发后每一秒执行一次处理函数
var throttle = function(func, delay) {     
    var timer = nullvar startTime = Date.now()//获取第一次当前时间戳

    return function() {             
        var curTime = Date.now() // 获取执行时的时间戳         
        var remaining = delay - (curTime - startTime)// 获取时间差 并获取是否到达触发的间隔时间         
        var context = this;             
        var args = arguments;             
        clearTimeout(timer);              
        if (remaining <= 0) {// 判断是否到达触发时间 (设置的触发间隔时间)小于（当前触发于上次间隔时间） 当remaining小于0时 触发处理函数 并重新定义第一次时间戳                 
            func.apply(context, args);                    
            startTime = Date.now();              
        } else {                    
            timer = setTimeout(func, remaining)// 注册定时器           
        }      
    }
}
function handle() {      
    console.log(Math.random());
} 
window.addEventListener('scroll', throttle(handle, 1000))

// 防抖（简易版） 解释：事件触发结束后才会执行一次处理函数 触发跟触发时不会进入处理函数
function antiShake(fn, delay = 300) {    
    var timer = null
　　 return function () {
        if (timer !== null) {
          clearTimeout(timer)
        }
　　　　 timer = setTimeout(fn, delay)
    }
}
// 处理函数
function fun() {    
  console.log('0')
}
// 滚动事件
window.addEventListener('scroll',antiShake(fun, 1000))

例子：

防抖使用场景监听input事件输入事件触发请求不能每次输入都请求浪费资源并会造成卡顿这个时候防抖最合适

节流使用场景监听滚动事件选择地址栏滚动到对应的城市选中对应城市的字母不能等待事件结束再去触发处理函数则使用节流短时间去触发处理函数这个时候节流最合适

js 防抖和节流 （学习笔记）

js 防抖和节流（学习笔记）