【VUE】在watch中调用防抖函数

使用场景

表单中的某元素在用户输入时需要监听输入内容，由于用户在输入过程中无需时刻调用,这里采用防抖动函数。代码：

1.封装防抖函数

/**
* 防抖
* @param {Function} fn
* @param {Number} delay
*/

export const debounceFn = (fn, delay) => {
  let timer = null
  delay = delay || 500
  return (...args) => {
    const vm = this
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(vm, args)
    }, delay)
  }
}

2.watch中调用防抖函数

<template>
	<div>
        <el-form label-position="left" label-width="60px">
            <el-form-item label="考生a：" prop="sum">
               <el-input v-model="form1.sum" placeholder="请打分"></el-input>
            </el-form-item>
        </el-form>
  </div>
</template>
<script>
import { debounceFn  } from '@/utils/index';
export default {
	data() {
		form1: {
			sum: ''
		},
		isSubmit: false
	},
	watch: {
	    form1: {
	      handler (val, old) {
	        this.check(this, val)
	      },
	      deep: true
	    }
  	},
	methods: {
		// 将防抖函数写入方法中可以在Watch中随时调用
		// debounceFn传入函数内部this的指向不是当前vue实例，我这里采用的是调用的时候讲this传入
		check: debounceFn  ((vm, val) => {
	      if (val.sum) {
	        vm.isSubmit = true
	      }
	    }, 500)
	}
}
</script>

总结

防抖动函数实际是一个闭包，return出来的function内部有一个setTimeout，初次调用debounce会得到防抖动函数，这里主要说下与vue框架中watch一起使用，debounce不能写在watch函数内部，仔细观察debounce可以发现防抖的关键是定时器的使用和清除，上诉例子中timeout记录当前作用域中是否存在定时器。