防抖和节流

面试题里经常见到这两个词语：防抖和节流，主要是和性能优化有关系，今天终于用了一次实例：

应用情景：要做一个美颜的功能，当滑动滚动条的时候，可以直接请求接口，实现效果

但是滑动条每次滑动都会触发出很多值变化，可以理解为每次滑动他都请求了好多次接口，这样就会影响性能。除此之外，还有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);
}

节流的实现方式有两种可以选择：时间戳版和定时器版，区别就是，时间戳版的函数触发是在时间段内开始的时候，而定时器版的函数触发是在时间段内结束的时候。

最后看到别的大神一句精辟的总结借鉴一下“防抖是控制次数，节流是控制频率”