VUE中使用lodash的debounce和throttle方法

说明:

debounce和throttle在脚手架的使用,此处以防抖函数debounce为例避免按钮被重复点击

引入:

import lodash from 'lodash'

使用:

方法一:直接使用debounce方法

 //  审核
      audit: lodash.debounce(function() {
          this.$refs['model'].saveTotalResult(1).then(() => {
            const reportId = this.activeReport.id;
            report.audit(reportId).then(res => {
				 successMsg(res.msg)
            })
          })
        }, 300),

方式二:方法内部调用,先声明后使用

	audit() {
        this.auditLoading = true;
        // 需要使用箭头函数避免this指向问题(此处考虑按钮加载状态所以将loading放在debounce外部)
        const audit = lodash.debounce(() => {
          this.$refs['model'].saveTotalResult(1).then(() => {
            const reportId = this.activeReport.id;
            report.audit(reportId).then(res => {
              this.auditLoading = false;
              successMsg(res.msg)
            })
          })
        }, 300)
        audit();
      },

你可能感兴趣的:(VUE,javascript,vue.js,es6)