【Vue】VUE组建防抖

防抖原理

产生原因：当持续触发某事件时，一定时间间隔内没有再触发事件时，事件处理函数才会执行一次，如果设定的时间间隔到来之前，又一次触发了事件，就重新开始延时。简单来说就是对点击事件做了一个延时处理。

防抖JS实现方法

防抖主要运用的是闭包原理，触发点击事件，调用debounce方法，传入参数为需要防抖的方法和延时时间，retrun返回一个方法，settime时间到再触发 .call(this, arges)执行方法。

// 防抖函数 // 参数1：触发的方法 // 参数2：等待时间 function debounce(fun, time) { let timer return (arges) => { clearInterval(timer) timer = setTimeout(() => { // 触发该方法 fun.call(this, arges) }, time) } }, // 点击事件 onClick() { let setTimeMsg = this.debounce(this.getMsg(), 500) setTimeMsg("参数可选，如果是axios请求，直接触发axois方法") }, // 请求 getMsg(arges) { getResource(1).then(response => { }) },

VUE防抖组建

<template> <div> <Button :type="btn_type" @click="onClickDebounce">btn_txt</Button> </div> </template> <script> export default { props: { // 按钮显示文字 btn_txt: { type: String, default: '' }, // 防抖时间 debounce_timeout: { type: Number, default: 500 }, // 按钮type btn_type: { type: String, default: 'primary' } }, methods: { // 防抖 闭包返回方法 onClickDebounce() { let timer if (timer !== null) clearInterval(timer) timer = setTimeout(() => { // 触发父组建的点击事件 this.$emit('on-click') }, this.debounce_timeout) } } } </script> <style scoped> </style>