函数节流： 如果将水龙头拧紧直到水是以水滴的形式流出，那你会发现每隔一段时间，就会有一滴水流出。
函数防抖：如果用手指一直按住一个弹簧，它将不会弹起直到你松手为止
节流函数允许一个函数在规定的时间内只执行一次，它和防抖动最大的区别就是，节流函数不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。
节流
思路：每次触发事件时都判断当前是否有等待执行的延时函数；将一个函数的调用频率限制在一定阈值内，例如 1s 内一个函数不能被调用两次。
实现：
//写法一
function throttle(method,context){
method.tId = null;
if(!method.tId){
method.tId = setTimeout(function(){
method.call(context);
method.tId = null;
},1000)
}
}
//写法二
function throttle(fn,wait){
var timer;
return function(...args){
if(!timer){
timer = setTimeout(()=>timer=null , wait);
console.log(timer)
return fn.apply(this,args)
}
}
// 写法三
function throttle(fn,delay) {
var runFlag = false;
return function (e) {
// 判断之前调用是否完成
if (runFlag) {
return false;
}
runFlag = true;
setTimeout(() => {
fn(e);
runFlag = false;
},delay)
}
}
场景
窗口调整（resize）
页面滚动（scroll）
抢购疯狂点击（mousedown）
注册时邮箱的输入框，随着用户的输入，实时判断邮箱格式是否正确。此时，每一次的用户输入都触发邮箱格式检测事件，造成了浪费，于是设置两次输入之间的时间间隔大于800ms时（用户结束输入时），再执行检查邮箱格式。
const filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
$("#email").on("keyup",checkEmail());
function checkEmail(){
let timer=null;
return function (){
clearTimeout(timer);
timer=setTimeout(function(){
console.log('执行检查');
},800);
}
}
当第一次输入事件触发，设置定时：在800ms之后执行检查。
假如只过了100ms，上次的定时还没执行，此时清除定时，重新定时800ms。
紧跟着又来了一次输入，上次定时依然没执行，再次清除定时，重新定时800ms。
...
直到最近一次的输入，后面没有紧邻的输入了，这最近一次的输入定时计时结束，终于执行了检查代码。
抢购疯狂点击
function throttle(method, delay){
var last = 0;
return function (){
var now = +new Date();
if(now - last > delay){
method.apply(this,arguments);
last = now;
}
}
}
document.getElementById('throttle').onclick = throttle(function(){console.log('click')},2000);
function throttle(method, delay){
var last = 0;
return function (){
var now = +new Date();
if(now - last > delay){
method.apply(this,arguments);
last = now;
}
}
}
document.getElementById('throttle').onclick = throttle(function(){console.log('click')},2000);
窗口调整
function throttle(fn,delay) {
var runFlag = false;
return function (e) {
// 判断之前调用是否完成
if (runFlag) {
return false;
}
runFlag = true;
setTimeout(() => {
fn(e);
runFlag = false;
},delay)
}
}
function sayHi(e){
console.log(e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHi, 500));
防抖
思路：每次触发事件时都取消之前的延时调用方法；当调用函数n秒后，才会执行该动作，若在这n秒内又调用该函数则将取消前一次并重新计算执行时间。
实现：
// 方法一
function debounce(method,context){
clearTimeout(method.tId);
method.tId = setTimeout(function(){
method.call(context);
},1000);
}
// 方法二
function debounce(fn,delay) {
var handle;
return function (e) {
clearTimeout(handle);
handle = setTimeout(() => {
fn(e)
},delay);
}
}
场景
实时搜索（keyup）
拖拽（mousemove）
窗口调整
function debounce(fn, delay) {
let handle;
return function (e) {
// 取消之前的延时调用
clearTimeout(handle);
handle = setTimeout(() => {
fn(e);
}, delay);
}
}
function sayHi(e){
console.log(e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', debounce(sayHi, 500));
一个加载新闻的列表页，只要滚动到页面的最下面就继续加载一部分新闻出来，即滚动加载。这时，就要监听滚动事件，判断若滚动
由于滚动事件非常频繁，稍微滚动一下就会触发许多次，如果频繁触发的滚动，每一次都去检查是否到页面底部了再次造成了浪费。
于是设置一个开关，一次只能有一个触发执行，并对执行设置计时一段时间再执行，执行完毕之后再解锁。这就是函数防抖。
总结
函数防抖和节流的目的都是减少某个操作的执行频率或次数，防抖偏向于不在意过程更注重结束的时候能执行就可以了，节流更偏向过程必须执行但是可以减低频率在一个合理的范围内，物极必反，事半未必不能功倍！