vue防抖函数封装与使用

封装

debounce.js

/**
 * 防抖函数
 * @param {*} fn 函数
 * @param {*} delay 暂停时间
 * @returns 
 */
export function debounce(fn, delay = 500) {
    let timer = null
    return function () {
      const args = arguments
      if (timer) {
        clearTimeout(timer)
      }
      timer = setTimeout(() => {
        fn.apply(this, ...args)
      }, delay)
    }
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

使用与传参

<el-button type="danger" @click="sendDebounce([TableRowData])">防抖函数el-button>
<script>
export default{
	methods: {
		funca() {  
            console.log('send_suc'); 
            this.$message.success('ok');  
        },  
        sendDebounce: debounce(function(data){
            this.funca()
            console.log(111, data);
        }, 1000),
	}
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15