防抖节流

js 防抖和节流

防抖debounce。
https://www.lodashjs.com/docs/lodash.debounce
抖:指高频事件，防止高频事件的发生
原理:当这个函数被调用时，不立刻执行，而是延迟10秒执行。 如果在这10秒内再次调用了这个函数，则从当前被调用的时间开始算，再延迟10秒。 (整个10秒内，不能被打断,一旦打断，就要重新计时)。 如果在这10秒内没有再次调用这个函数，10秒后执行代码。
比如鼠标滚轮事件，每次鼠标滚动都会触发一次事件，但是只有鼠标滚轮停下后n秒后才会真正触发最后的事件处理

<template>
  <div>
    <input @input="debounceFn" type="text" v-model="test" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      test: "",
    };
  },
  methods: {
    testFn() { // @input打印函数
      console.log(this.test);
    },
    debounceFn() {
        if(this.timeoutID){ 
            clearTimeout(this.timeoutID)
        }
        this.timeoutID = setTimeout(() => {
              this.testFn() // 这里应该是后台请求
        }, 1000);
    },
  },
};
</script>

import debounce from 'lodash/debounce'
SubmitHandle:debounce(function () {},需要延迟的毫秒数,{
	'leading': true, // (boolean): 指定在延迟开始前调用。
    'trailing': false, // (boolean): 指定在延迟结束后调用。
    'maxWait': 1000, // (number): 设置 func 允许被延迟的最大值。
})

节流，throttle
https://www.lodashjs.com/docs/lodash.throttle
以节流5s为例
如果这个函数被调用，检查它距离上一次被调用的时间是否相隔>=5s，是就执行；否则，本次调用就不执行代码

throttle(func, [wait=0], [options=]) 

三、区别：
防抖在多次（频繁）触发事件时，只会执行最后一次触发，不停止触发事件的行为就不会执行事件处理（先即时在执行）
节流在多次（频繁）触发事件时，能保证在指定时间内一定会且只会触发一次（先执行在即时）