這篇文章主要為大家展示了“js如何防止按鈕重復(fù)點(diǎn)擊”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“js如何防止按鈕重復(fù)點(diǎn)擊”這篇文章吧。

10余年的太白網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都全網(wǎng)營(yíng)銷的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整太白建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“太白網(wǎng)站設(shè)計(jì)”,“太白網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

1.粗暴簡(jiǎn)單辦法

直接定義一個(gè)變量，每次點(diǎn)擊過(guò)后等所有操作結(jié)束后釋放變量?；蚴褂胠oading防止用戶點(diǎn)擊

//* 部分代碼
<script>
export default {
  methods: {
    onSubmit() {
      if (this.lock) return;
      this.lock = true;
      // const load = this.$loading();
      this.$http.create().then((res) => {
        // do something
        this.lock = false;
        // load.close();
      }).catch(() => {
        this.lock = false;
        // load.close();
      })
    }, 
  },
}
</script>

這種辦法簡(jiǎn)單粗暴，但是每次需要防止重復(fù)點(diǎn)擊的地方,都要去關(guān)注lock或者loading的重置，總覺(jué)的很啰嗦。也沒(méi)辦法好好的抽離出來(lái)。（PS:能力有限，自己也沒(méi)有想到比較好的辦法在上層優(yōu)雅的封裝出來(lái)）

2.直接把loading放到http請(qǐng)求中去做，統(tǒng)一封裝方法

//* 部分代碼
...
let load;
http.interceptors.request.use((config) => {
  load = Loading();
  ...
  return config;
}, error => {
  load.close();
  return Promise.reject(error)
});

http.interceptors.response.use((response) => {
  load.close();
  ...
  return response; 
},error => {
  load.close();
  return Promise.reject(error);
});

這種辦法在實(shí)際中也用過(guò)了一段時(shí)間，一開(kāi)始挺好用的，但是在后面自己弱網(wǎng)測(cè)試的時(shí)候發(fā)現(xiàn)也是會(huì)導(dǎo)致重復(fù)點(diǎn)擊的情況。而且在有些時(shí)候loading圖并不是所有請(qǐng)求都需要，還要去做個(gè)是否顯示loading的配置，這樣感覺(jué)http請(qǐng)求又笨重了，也沒(méi)有讓重復(fù)點(diǎn)擊功能抽離出來(lái)。

3.裝飾器方法

說(shuō)到裝飾器，最經(jīng)典的應(yīng)用場(chǎng)景就是面向切片編程（AOP），《前端常用設(shè)計(jì)模式(1)--裝飾器(decorator)》juejin.im/post/5cb415… 做出了很棒的理解與應(yīng)用。得益于ES7和TS，裝飾器在Angular和react中都有很多案例，因?yàn)閂ue中Class不是必選，所以在Vue中很少看到使用裝飾器的，得益于官方有vue-class-component來(lái)使用Class進(jìn)行創(chuàng)建組件的方法，開(kāi)始了自己的嘗試之路。

lock.js

export function lock(target, key, desc) {
  const fn = desc.value;
  //* 沒(méi)有使用箭頭函數(shù)是為了讓this能指回到vue，這樣就可以獲取到vue的data，從而做更多的事情，下面會(huì)講到
  desc.value = async function() {
    if (this.$lock) return;
    this.$lock = true;
    await fn.apply(this).catch(() => {
      this.$lock = false;
    });
    this.$lock = false;
    return target;
  };
}

index.vue

<template>
  <!-- do something -->
</template>
<script>
import Vue from 'vue';
import Component from 'vue-class-component';
import { lock } from './lock';

@Component
export default class extends Vue {
  @lock
  async onSubmit() {
    await this.$http.create();
    // do something
  }
}
</script>

感覺(jué)這樣就完全抽離了重復(fù)點(diǎn)擊的功能（PS：好像是這樣的），也能獨(dú)立測(cè)試，想在哪里用就在哪里用。感覺(jué)不足的是，裝飾器里需要讓this重新指回vue才能獲取到vue的data

4.舉一反三

既然重復(fù)點(diǎn)擊可以從業(yè)務(wù)代碼中抽離出來(lái)，那我們提交表單的字段驗(yàn)證也就同樣可以抽離出來(lái)了。（PS：所有UI框架都有成熟的form表單驗(yàn)證組件，就當(dāng)我是瞎折騰）

validate.js

export function validate(target, key, desc) {
 const fn = desc.value;

 desc.value = async function () {
  const {
   name, phone,
  } = this.data;
  
  if (!name) {
   return confirm('請(qǐng)輸入您的姓名');
  }
  if (name.length > 20) {
   return confirm('您的姓名不能超過(guò)20個(gè)字');
  }
  if (!phone) {
   return confirm('請(qǐng)輸入您的電話');
  }
  if (!((/^\d{11}$/.test(phone)))) {
   return confirm('請(qǐng)輸入11位的電話號(hào)碼');
  }
  
  await fn.apply(this);
  return target;
 };
}

index.vue

<template>
  <!-- do something -->
</template>
<script>
import Vue from 'vue';
import Component from 'vue-class-component';
import { validate } from './validate';

@Component
export default class extends Vue {
  data = {
    name: '',
    phone: '',
  }
  
  @validate
  async onSubmit() {
    await this.$http.create();
    // do something
  }
}
</script>

5.防抖方法（補(bǔ)充）

有小伙伴說(shuō)可以使用防抖，個(gè)人覺(jué)得還是需要看場(chǎng)景，這里也就列出防抖的方法。

防抖方法是一個(gè)很好限制重復(fù)事件頻繁觸發(fā)的，經(jīng)常用在scroll、resize事件上，也可以嘗試用在重復(fù)點(diǎn)擊上面。但是如果點(diǎn)擊事件后需要有異步處理，單單使用防抖方法也會(huì)沒(méi)辦法限制弱網(wǎng)（PS：吐槽一下成都地鐵上移動(dòng)經(jīng)常網(wǎng)絡(luò)不好）下重復(fù)點(diǎn)擊的情況。如：防抖時(shí)間為1秒，但是請(qǐng)求花掉了2秒才返回?cái)?shù)據(jù)給前端進(jìn)行處理，中間產(chǎn)生了時(shí)間差，導(dǎo)致用戶有時(shí)間重復(fù)點(diǎn)擊。所以個(gè)人覺(jué)得還是需要配合其它辦法。同樣列出防抖的列子：

throttle.js

const throttle = function(fn, wait, scope) {
  clearTimeout(throttle.timer);
  throttle.timer = setTimeout(function() {
    fn.apply(scope);
  }, wait);
};

index.vue

<template>
  <!-- do something -->  
</template>
<script>
export default {
  onSubmit() {
    throttle(() => {
      this.$http.create().then((result) => {
        // do something
      });
    }, 1000);
  },
};
</script>

以上是“js如何防止按鈕重復(fù)點(diǎn)擊”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

標(biāo)題名稱：js如何防止按鈕重復(fù)點(diǎn)擊
標(biāo)題URL：http://jinyejixie.com/article32/jjpdsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、營(yíng)銷型網(wǎng)站建設(shè)、全網(wǎng)營(yíng)銷推廣、動(dòng)態(tài)網(wǎng)站、微信公眾號(hào)、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)