防抖与节流

防抖或是节流，都是为了限制函数执行的次数。

防抖：通过setTimeout，在一定时间间隔内，将多次触发变为一次触发。
节流：减少一段时间内的触发次数。（控制流量）

防抖：

// 模拟表单提交
const btn = document.getElementById('btn');
btn.addEventListener('click', debounce(submit, 1000));

一、最基础版本，实现1秒内只提交一次：

思路：

• addEventListener的第二个参数为一个函数，而不是直接函数调用，所以debounce要返回一个函数
• 最外面声明timer，有timer则清除，重新计时1s后submit。这样总是最后一次触发1s后才会submit。

function debounce(fn, delay){
    var timer = null;

    return function(){
        if(timer){ clearTimeout(timer); }

        timer = setTimeout(() => {
            fn();
        }, delay);
    }
}

function submit(){
    console.log('submit');
}

这样存其实依然存在问题，如何在提交函数（submit）中拿到正确的事件参数e，以及this（this应该是指向btn）？
e是通过addEventListener第二个参数回调函数传递的，也就是在debounce函数return的匿名函数中，可以拿到e，直接传给fn（timer的回调是箭头函数，所以可以直接拿到外部绑定的this和arguments）。
为了兼容除e之外的未知参数，使用arguments形式传递参数。
apply直接传递数组形式arguments并改变fn中的this指向为箭头函数绑定的this，也就是指向btn。

function debounce(fn, delay){
    var timer = null;

    return function(){
        console.log(e);  // PointerEvent
        if(timer){ clearTimeout(timer); }

        timer = setTimeout(() => {
            console.log(this, arguments);  // btn  Arguments: []
            fn.apply(this, arguments);
        }, delay);
    }
}

function submit(){
    console.log('this:', this);  // btn
    console.log('e:', arguments[0]); // 输出PointerEvent
}

二、基本的防抖已实现，但还有一个小问题：每次的submit执行总会延迟1s，这样适用于类似监听搜索框变化，发起搜索的场景，而对于类似表单提交场景是不需要延迟的，这样用户体验是不友好的，如何能在第一次点击时可以立即执行？（换句话说，只在连续点击的第一次点击时立即执行，后面的点击无响应）

function debounce(fn, delay){
    var timer = null;

    return function(){
        const firstClick = !timer; // firstClick标记是否第一次点击，通过timer来判断

        if(timer){ clearTimeout(timer); }

        if(firstClick){
            fn.apply(this, arguments);  // 如果是第一次，立即执行
        }
        timer = setTimeout(() => {
            timer = null;  // 1s后timer置为初始值null（不能clearTimeout，这样timer依然存在，值为number编号）
        }, delay);
    }
}

节流

最外层初始化begin为0，第一次点击的时间戳和begin比较必然大于delay，后面每次点击，判断距离上次执行submit事件大于2s才再次执行，并更新begin

const btn = document.getElementById('btn');
btn.addEventListener('click', throttle(submit, 2000));

function throttle(fn, delay){
    var begin = 0;

    return function(){
        var cur = new Date().getTime();
        if(cur - begin > delay){
            console.log(cur - begin); 
            submit();
            begin = cur;
        }
    }
}

function submit(){
    console.log('submit');
}

// 连续多次点击，log输出：
1635479979895
submit
13143
submit
2073
submit
2002
submit
2019
submit