防抖、节流的概念和实现

防抖（Debounce）和节流（Throttle）是我们前端日常工作中常用的两个性能优化功能。主要用于控制事件触发频率、处理频繁触发的事件，以减少不必要的资源消耗。比如窗口滚动事件、窗口大小改变、输入框输入事件等。

防抖：一个或事件被连续的操作时，一段时间内只执行最后一次。比如事件在触发 n 秒后再执行回调，如果在 n 秒内事件被再次触发，则重新计时。常常使用在点击请求的事件上，避免用户在一定时间内多次点击触发请求，导致向后端发送多次请求。像这种触发频率特别高的事件，通常我们在项目中，只需要最后一次触发的结果。推荐使用防抖。

节流：一段时间内只执行一次。在 n 秒内，只能有一次触发事件的回调函数执行。如果在 n 秒事件被多次触发，只有一个是生效的。我们就可以通过节流降低事件触发调用的频率。

防抖原理：利用定时器，每次触发事件的时候还没有到定时器等待的时间，如果此时下次事件又被触发了，就将定时器清除掉，上一次的执行还没开始，执行下一次的定时器了

节流原理：声明开始时间 和 结束时间，再获取当前时间，通过判断当前时间 减去 结束时间 是否小于 指定的时间(300ms)。条件成立则执行回调，同时将本次执行的时间作为下次开始的时间。

推荐官网：https://www.lodashjs.com/

简单的实现防抖和节流

防抖：
    // 定时器变量
    let timer = null;
    // 点击事件
    btn.onclick = function () {
        console.log(111);
        // 如果 timer 存在
        if (timer) {
            // 清除定时器
            clearTimeout(timer);
        }
        // 重新赋值为null
        timer = null;

        timer = setTimeout(() => {
            console.log('防抖');
        }, 200)
    }

节流：
 let startTime = new Date() * 1

  // 当前时间
    let currentTime = new Date() * 1;
          
    if (currentTime - startTime >= delay) {    
        console.log('节流');            
        startTime = currentTime;
     }
封装的方法：
   // 节流
    let startTime = new Date() * 1

    function throttle(fun, delay) {
        return function () {
            // 当前时间
            let currentTime = new Date() * 1;
            console.log(currentTime - startTime);
            if (currentTime - startTime >= delay) {
                startTime = currentTime;
                return fun()
            }
        }
    }


    btn.onclick = throttle(() => {
        console.log('节流');
    }, 1000)

封装防抖和节流的方法

// 防抖  一段时间内只触发一次
// fn 是我们包装的js 回调, delay 是延迟执行需要等待的时间 
function debounce(fn, delay) {
    // 1. 定义一个空的定时器
    let timer = null;
    // 2.调用时 执行的上下文 this  声明一个变量 赋值 this
    let context = this;
    // 3.调用时传入的参数  arguments (参数)
    let args = arguments
    // 4. 判断 定时器 是否有任务在执行
    if (timer) {
        // 如果有任务在执行 就清除正在执行的任务
        clearTimeout(timer);
    }
    // 5.设置新的定时器，并执行新的回调 
    timer = setTimeout(() => {
        // 通过apply 改变this指向
        fn.apply(context, args)
    }, delay)
}


// 节流 一段时间内只执行最后一次
// fn 执行的回调 , delay 执行的时间 / 时间限制
function throttle(fn, delay) {
    // 1. last 上一次触发回调的时间 timer定时器 
    let last = 0,
        timer = null;
    // 2.  
    return function () {
        // 3.调用时的上下文 就是 声明一个变量 赋值 this
        let context = this;
        // 4.调用的时候传入的参数
        let args = arguments;
        // 5.本次调用的时间   new一个时间戳
        let now = new Date() * 1;
        // 判断 如果当前的时间 减去最后一次执行的时间，小于需要等待的时间
        if (now - last < delay) {
            // 清除当时的定时器,触发回调, 并重新开启一个新的定时器
            clearTimeout(timer);
            timer = setTimeout(() => {
                last = now;
                fn.apply(context, args);
            }, delay)
        } else {
            // 如果超出了设定的等待时间
            last = now;
            fn.apply(context, args)
        }
    }
}