VUE----使用JS防抖

参考：JS 防抖与节流

场景：点击一个按钮，频繁的点击需要不断和后台进行交互，更新后台数据，实际上以最后的一次操作为准也是没有问题的。使用JS防抖便可以解决这个问题

【1】JS封装

/**
* 将防抖函数封装到公共js代码里
* 这里涉及到闭包的相关内容，闭包内容自行百度
*/

export function debouce(func, delay = 100) {
  let timer = null;
  return function (...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      func.call(this, ...args);
    }, delay);
  }
}

【2】页面引用，一个最最最简单的例子

<script>
import { debouce } from '../../util/util'
export default {
  name:'',
  data() {
    return {
        clickMe : null
    }
  },
  created(){
     // clickMe 接受返回的函数， 这里的function你也可以换成你的methods里面定义的函数
     this.clickMe = debouce(function(data){
        console.log('123:' + data);
      }, 3000)
  },
  methods: {
    test: function() {
      this.clickMe('zhoulw');
    },
    // 你也可以这样写
    test2: function(){
        if (!this.clickMe) {
            this.clickMe = debouce(function(data){
                console.log('123:' + data);
            }, 3000)
        }
        this.clickMe('zhoulw');
    }
  }

}
</script>