js防抖和节流

1. 函数防抖: 规定函数至少间隔多久执行

案例(以输入框的防抖为例)

<div>
    <input @input="input">
  </div>

 methods: {
    input(e) {
      if (this.timeOutId) clearTimeout(this.timeOutId)
      this.timeOutId = setTimeout(() => {
        console.log(e.target.value)
      }, 800)
    }
  }

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
函数执行过一次后，在n秒内不能再次执行，否则推迟函数执行
下一次函数调用将清除上一次的定时器，并用setTimeout重新计时

第二种方法: 以el-input输入框为例

<el-input v-model="input.value" placeholder="防抖测试" />
 data() {
    return {
      timeOutId: '',
      input: {
        value: ''
      },
    }
  },
  watch: {
    'input.value': {
      // 这里顺便展示嵌套的数据监听怎么写
      handler(val) {
        function aaa() {
          console.log(val)
        }
        this.debounce(aaa, 1000)
      }
    }
  },
  methods: {
   // 防抖方法:
    debounce(fn, time) {
      if (this.timeOutId) clearTimeout(this.timeOutId)
      this.timeOutId = setTimeout(fn, time)
    },
  }

2.函数节流:  限制一个函数在一定时间内只能执行一次

案例(以按钮点击为例)

<div>
    <el-button type="primary" @click="btn">节流按钮</el-button>
  </div>

<script>
export default {
  data() {
    return {
      stopFlag: false
    }
  },
  methods: {
     btn() {
      if (this.stopFlag) {
        // 先判断如果是 真 就return 中断后面的代码
        // if没有作用域   所以这里成立后return会影响到外面函数的代码不再执行    
        return false 
      }
        // 上面判断不成立就走这里 变为真
      this.stopFlag = true 
      setTimeout(() => {
        // 然后继续走到这里的定时器(因为此时为真 循环每次在上面的判断时都会终止 所以在再次转为假时需要定时器执行完,这样就实现了节流效果)
        this.stopFlag = false // 到时间后再次转为假
      }, 2000)
      console.log('点击了按钮') // 做节流操作
    }
}
</script>