程序的防抖与节流
防抖:
程序防抖是为了使用户多次发起请求时,某时间内最终只请求最后一次,不影响用户的体验但实现监听请求功能。
例如 程序设置防抖时间为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(‘需要传入的参数‘)