防抖或是节流，都是为了限制函数执行的次数。
防抖：通过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
