防抖和节流(vue项目中的使用)

需求: 给点击提交的按钮做防抖

实现原理: 用throttle-debounce库的防抖函数debounce实现

实现过程中遇到的问题: debounce函数返回一个函数,所以如何处理才能让按钮每次都是执行debounce返回的函数

问题解决方法 在created中定义方法为debounce返回的方法,将这个方法绑定到元素上

实现代码:

    <template>
        <el-button @click="handleSave">保存</el-button>
    </template>
    <script>
        import {debounce} from 'throttle-debounce'
        export default{
            methods:{
                save(){...}
            },
            created(){
                //第二个参数如果不传或者传false,方法会在时间间隔最后执行,如果传true,会在开始执行
                this.handleSave = debounce(2000, true, save)
            }
        }
    </script>