js 防止重複提交方案

無樣發表於2019-04-26

注意: 不要單獨宣告一個 boolean 型別的變數和屬性,如果這樣會汙染區域性和全域性物件,也不夠集中化處理(也就說沒有封裝)。

// 私有屬性
const _ary = []
/**
 * @function Submitting 某次提交還在【提交中】
 * @param {type: object} obj 最好是引用型別,引用的地址是不變的(類似java 的 equal)
 * @return { type: boolean } true 提交中 | false 沒在提交中
 */
export const Submitting = function(obj) {
  const index = _ary.indexOf(obj)
  if (index === -1) {
    _ary.push(obj)
    return false
  }
  return true
}
/**
 * @function SubmitEnd 提交【 完成了】
 * @param {*} obj  存在,某次提交完成 | 不存在,所有提交完成
 */
export const SubmitEnd = function(obj) {
  // 類似柯擬化
  if (!obj) return _CloseAllSubmitting()
  const index = _ary.indexOf(obj)
  if (index === -1) return
  _ary.splice(index, 1)
}
/**
 * @function AllSubmitEnd 所有的提交解決
 * @param {type: object} obj
 */
function _CloseAllSubmitting() {
  _ary.splice(0, _ary.length)
}
複製程式碼

應用例子:


async submit () {
    if (Submitting(submit)) return
    // ajax 操作
    await fetch(/* todo */)
    SubmitEnd()
    // todo
}
複製程式碼

相關文章