程序的防抖与节流（js）

程序的防抖与节流

防抖：
　　程序防抖是为了使用户多次发起请求时，某时间内最终只请求最后一次，不影响用户的体验但实现监听请求功能。
　　　　例如 程序设置防抖时间为2秒 用户在第 0秒时请求第一次，在第2秒时本该执行方法，但方法还没执行
　　　　但是 用户在第 1秒时又请求了第二次，此时之前的请求清除，重新刷新定时器，方法在第3秒响应 依次类推

　　最经典的案例为：
　　1.当前我想要监听input输入框输入事件，我的预想是：用户每次输入后我都请求后台一次数据，当然是使用oninput监听输入动作
　　2.但是，如果用户输入的太频繁，会导致服务器压力过大

　　此时的解决方法是：
　　1.还是让用户请求，但是我只监听用户停下输入动作后的最后一次请求

　　实现方法：定时器+闭包

　　function debounce(fn, wait) {
　　　　//fn为需要防抖的方法,wait是等待时间   
　　　　var timeout = null;    
　　　　return function(a) {  
　　　　　　/*如果有新的请求过来了，将清除上一次请求，达到每次只请求最新的那次的目的*/     
　　　　　　//a为传入fn的参数
　　　　　　if(timeout !== null) clearTimeout(timeout);  
　　　　　　timeout = setTimeout(()=>{fn(a)}, wait);    
　　　　}
　　}

　　调用方法为
fn(a){console.log(a)}//需要被防抖的函数
let b=debounce(fn,1000) //b为新构造的函数 指向debounce内部return的function

b('需要传入fn的参数')

节流：
程序节流是为了在固定时间内只能请求一次
例如 设置节流的时间为 2秒 用户在第 0秒时请求第一次，程序立马执行，但是在0-2秒的所有请求失效
用户在第 1秒请求第二次，程序不执行
用户在第 3秒请求第三次，程序立马执行，但是在3-5秒时所有请求失效

案例：某页面跳转方法响应为0.2秒，但是用户在急的时候会疯狂点击，此时，我只能让他响应第一次

实现方法：定时器+闭包

function jieliu(fn,wait){
var state=true
//state表示是否可以请求通过
return function(a){
if(state){
//当可以通过时可以进行下面的操作
state=false //关门不让后续的过
fn(a) //执行函数
setTimeout(()=>{
state=true //开门
},wait)
}
}
}

调用方法为：
fn(a){ console.log(a)}//需要节流的函数
let bb=jieliu(fn,1000) //新构造的函数
bb('需要传入的参数')