踩坑记录：vue使用debounce函数

正确写法：

<template>
  <h-page-container>
    <el-button @click="handleClick()">点我</el-button>
  </h-page-container>
</template>
<script>
import { debounce } from './common.js'
export default {
  name: 'Hello',
  data () {
    return {
    }
  },
  methods: {
    handleClick: debounce(function () { // 问题一：handleClick: debounce的写法有什么用?
      this.clg()
    }, 200),
    clg () {
      console.log('111111')
    }
  }
}
</script>

debounce是已经准备好的：

/**
 * 函数防抖
 */
export function debounce (fn, delay) {
  // 记录上一次的延时器
  let timer = null
  var delay = delay || 200
  return function () {
    const args = arguments
    const that = this
    // 清除上一次延时器
    clearTimeout(timer)
    timer = setTimeout(function () {
      fn.apply(that, args)
    }, delay)
  }
}

问题一：handleClick: debounce的写法有什么用?

handleClick: debounce相当于:

<template>
  <h-page-container>
    <el-button @click="handleClick()">点我</el-button>
  </h-page-container>
</template>
<script>
import { debounce } from './common.js'
export default {
  name: 'Hello',
  data () {
    return {
      test: debounce(function () {
        this.clg()
      }, 200)
    }
  },
  methods: {
    handleClick () {
      this.test()
    },
    clg () {
      console.log('111111')
    }
  }
}
</script>

但是当我改写成下面这种写法时，clg在被我点击时就直接触发了（点击了多少次就会延迟200ms后再执行多少次clg），并没有实现节流的效果，我猜想是加了一个（）导致他的返回值立刻执行了。但是为什么写成this.test()就不会被立刻执行呢？

handleClick () {
      const that = this
      debounce(function () {
        that.clg()
      }, 200)()
    },

是因为上面两种写法debounce其实只在页面渲染的时候执行了一次。但是最后一种写法他每次点击都会被执行，加入事件队列，然后再delay之后依次执行。

最最最简单就是自个在页面里写防抖，看半天他那封装原理没卵用，不如去花时间看看别的。

<template>
  <h-page-container>
    <el-button @click="handleClick()">点我</el-button>
  </h-page-container>
</template>
<script>
export default {
  name: 'Hello',
  data () {
    return {
      timer: null
    }
  },
  methods: {
    handleClick () {
      clearTimeout(this.timer)
      this.timer = setTimeout(function () {
        console.log('111111')
      }, 200)
    }
  }
}
</script>