vue中实现防抖和节流(操作场景input输入框和页面滚动)

防抖和节流:

共同点：都用到了setTimeout定时器，都是在指定时间间隔后执行函数，都是为了解决数据时时变化而时时请求导致性能差的问题

区别：防抖在指定时间间隔里再次调用函数，会清除定时器，重新计时，直到在最新的计时时间间隔里没有调用函数，才会执行定时器里的函数。而节流会在指定时间间隔后会执行一次函数，不会清除定时器而重新计时

防抖缺点：当用户在指定时间间隔里一直操作，那么setTimeout里的函数永远不会执行

节流缺点：如果用户一直操作，那么setimeout里的函数会在指定时间间隔后都会执行一次，如此反复

防抖

<!-- 防抖 -->
<template>
  <div class="layout">
    <el-input v-model="value" @input="changeValue" class="w200"></el-input>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value: '',
      // 判断是否还在继续输入
      timer: null
    }
  },
  methods: {
    changeValue () {
      // 如果timer不为空就表明在持续输入,每次改变都清除定时，这样就可以实现只输入最后一次结果(注意每次间隔如果超过500毫秒就会输出)
      if (this.timer !== null) clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        console.log(this.value)
      }, 500)
    }
  }
}
</script>

<style lang="less" scoped>
.layout {
  float: right;
  .w200 {
    width: 200px;
  }
}
</style>

前后差异图

节流

<!-- 节流 -->
<template>
  <div class="layout">
    <div class="main"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      flag: true
    }
  },
  methods: {
    // 节流
    scroll () {
      if (this.flag) {
        setTimeout(() => {
          // 500毫秒后在执行
          console.log('滚起来了')
          this.flag = true
        }, 500)
      }
      this.flag = false
    }
  },
  mounted () {
    // 监听滚动事件
    window.addEventListener('scroll', this.scroll)
  }
}
</script>
<style lang="less" scoped>
.layout {
  height: 100vh;
  .main {
    height: 150vh;
    border: 1px solid red;
  }
}
</style>

前后差异图