面试题里经常见到这两个词语:防抖和节流,主要是和性能优化有关系,今天终于用了一次实例:
应用情景:要做一个美颜的功能,当滑动滚动条的时候,可以直接请求接口,实现效果
但是滑动条每次滑动都会触发出很多值变化,可以理解为每次滑动他都请求了好多次接口,这样就会影响性能。除此之外,还有scroll、mousemove等,也是会频繁触发,和这种情况类似。
稍微复杂一点的情况如搜索框input事件,支持实时搜索功能可使用节流方案,每隔一段时间就查询一下搜索内容;页面需要适配用到resize,可使用防抖方案。
解决方法就很简单了,用到了我们说的防抖和节流,目的就是在于让他别触发的这么频繁。
首先介绍一下防抖(debounce):指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。上代码:
<template>
<div class="beauty-skin-slider">
<el-slider v-model="beauty" :min="0" :max="9" :step="1"></el-slider>
</div>
</template>
<script>
data () {
return {
beauty: 0,
timer1:null, //磨皮滑动条节流
};
},
watch: {
beauty (){
if(this.timer1){
clearTimeout(this.timer1);
}
this.timer1 = setTimeout(()=>{
this.onOpenBeauty();
},1000);
},
methods: {
//美颜
onOpenBeauty (){
//调用接口的一个方法
}
}
</script>
这个方法就是通过监听beauty的值,判断计时器存不存在,存在的话就清除,重新在设一秒的计时器,等这个计时器执行完了才调接口。
另一种方法是节流(throttle):指连续触发事件但是在 n 秒中只执行一次函数。上一个简单代码。
let flag = true;
function(){
if(!flag){
return false;
}
flag = false;
setTimeout(()=>{
this.onOpenBeauty();
flag = true;
},1000);
}
节流的实现方式有两种可以选择:时间戳版和定时器版,区别就是,时间戳版的函数触发是在时间段内开始的时候,而定时器版的函数触发是在时间段内结束的时候。
最后看到别的大神一句精辟的总结借鉴一下“防抖是控制次数,节流是控制频率”