vue pc端 使用lodash实现防抖

vue yekong

vue pc端实现防抖的方法,记录一下,留待复用。

安装依赖

cnpm i lodash --save

引用依赖

import debounce from 'lodash/debounce'

使用

// 保存
saveData: debounce(function () {
  var that = this
  var applyCosts = []
  that.applyCosts.forEach((type) => {
    var data = {
      costName: type.costName,
      costCode: type.costCode,
      costCount: type.number,
      totalPrice: type.totalPrice
    }
    applyCosts.push(data)
  });
  var applyBaseInfo = {}
  // 校验数据
  try {
    var check = true
    that.applyForms.forEach((type, index) => {
      if (type.fieldValue) {
        applyBaseInfo[type.id] = type.fieldValue
      }
      if (!that.$refs[`vform${index}`][0].submitForm('ruleForm')) {
        throw new Error("中断循环");
      }
    });
  } catch (e) {
    check = false
    console.log(e)
  }
  if (!check) {
    return
  }
  // 证明材料必传校验
  try {
    var isMust = true
    that.businessProveFiles.forEach((type, index) => {
      if (!that.$refs[`uploadFile${index}`][0].getIsMust()) {
        throw new Error("请上传证明材料");
      }
    });
  } catch (e) {
    that.$message.error(e.message);
    isMust = false
    // console.log(e)
  }
  if (!isMust) {
    return
  }
  // 校验数据
  that.applyForms.forEach((type, index) => {
    if (that.$refs[`vform${index}`][0]) {
      applyBaseInfo[type.id] = that.$refs[`vform${index}`][0].getFormData() + ''
    }
  });
  var applyFileIds = that.getBusinessProveFilesId() + ''
  transactSave({
    businessId: that.businessId,
    transactManner: that.transactManner,
    mailAddress: that.mailAddress,
    applyFileIds: applyFileIds,
    applyBaseInfo: applyBaseInfo,
    applyCosts: applyCosts,
    remark: that.remark
  }).then((res) => {
      if (res.code == 1) {
        that.$message({
          message: '提交成功',
          type: 'success'
        });
        that.goback()
      }
    }
  )
}, 1000, {'leading': true, 'trailing': false})
喜欢