1. 程式人生 > >vue watch監聽驗證碼時,axios延遲發送post請求。

vue watch監聽驗證碼時,axios延遲發送post請求。

不執行 for ret 輸入 是否 axios valueof 就是 NPU

標題寫的全面一些,方便其他人檢索,我就是找了半天找不到資料,最後自己搞定了。

原理:

每次監聽到輸入值變化,就打一個時間戳,然後暫停2秒再去提交post驗證。

但是每次提交前,判斷一下之前打的時間戳和現在時間是否大於2秒,如果大於,則真去提交post,否則return掉不執行。

以下是代碼片段:

data () {
     return {
        captchaInputLastTime:null,
    }

watch: {
// 監聽驗證碼變化
‘formData.captcha‘: async function(newVal){

                var delay = 2000;//延遲2000 毫秒執行
                this.captchaInputLastTime = (new Date()).valueOf();
                await this.$root.sleep(delay);
                var nowTime = (new Date()).valueOf();
                var gap = nowTime - this.captchaInputLastTime;
                if( gap  < delay){
                    return
                }

                axios.post。。。。。執行驗證邏輯。
}

methods: {
        sleep (ms = 1000) {
                return new Promise((resolve)=>setTimeout(resolve,ms));
        },
}

  

vue watch監聽驗證碼時,axios延遲發送post請求。