在项目开发过程中,我们通常会遇到这种需求,需要对某一行为进行js方法监听并且做出相应的业务处理,但是该行为变化的频率有可能是非常的频繁的,比如滚动条滚动、input框数值变化等。
我们都知道一个web项目性能很重要,性能好的项目能给用户留下好的印象,否则用户就会很自然的放弃这个应用,到那时我们的开发出来的东西,已经没有什么很大的价值了,因为不被认可。
好了bb完一堆废话,我们进入正题。今天要说的就是通过js的节流和防抖,来进行我们项目的一个性能优化。下面我们用input的输入作为一个栗子:
需求:有一个input搜索,此时展示数据必须根据用户输入的值,而动态展示。
做法:监听input的输入事件,然后实时进行后台接口请求,然后把数据更新。
分析:这样做可以实现需求,但是这样的开销是很大的,我们看下下面的效果图你就会明白,
通过上图,我们可以清楚的发现问题,每当我们输入一个字,就会进行业务处理,产生没必要的开销,所以我们有请主角登场。
主角一:防抖,作用就是让在事件触发的过程中,不去业务处理,而是等该事件结束时,则马上进行业务处理,这里事件结束后的多长时间去执行业务代码,是由我们自己设定的,也就是以下的参数wait
,单位毫秒。功能代码如下:
let timer = null;
const debounce = (fn,wait)=> { //fn表示业务处理方法,wait表示事件结束后多长时间执行fn
timer = setTimeout(() => {
fn();
},wait)
}
例子完整代码:
const inp = document.querySelector('input');
inp.oninput = function() {
debounce (getData,1000);
}
const getData = () => {
console.log('接口调用'+inp.value);
}
//防抖
let timer = null;
const debounce = (fn,wait)=> {
clearTimeout(timer);
timer = setTimeout(() => {
fn();
},wait)
}
效果图:
主角二:节流,节流和防抖不同,防抖是事件结束后一定的时间后才会执行业务代码。节流则是事件进行的过程中按一定的频率执行业务代码,这里说的频率也是我们自己设定,以下参数wait
。功能代码:
let timer = null;
const throttle = (fn,wait) => { //fn业务代码函数,wait为频率
if(!timer) {
timer = setTimeout(() => {
fn();
timer = null;
},wait)
}
}
例子完整代码:
const inp = document.querySelector('input');
inp.oninput = function() {
throttle(getData,1000)
}
const getData = () => {
console.log('接口调用'+inp.value);
}
//节流
let timer = null;
const throttle = (fn,wait) => {
if(!timer) {
timer = setTimeout(() => {
fn();
timer = null;
},wait)
}
}
效果图: