防止重复点击倒计时20秒

<template>
    <view class="loadMore">
        <view :class="flag?'btn colorBlue':'btn colorGray'" @click="btnClick">按钮20秒</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                flag: true, // flag设立是否可点击
                
                timer:null,
            }
        },
        onShow() {
            this.timerDowm();
        },
        methods: {
            btnClick(){
                uni.setStorageSync('downTimer',new Date().getTime());
                this.flag = false;
                this.timerDowm();
            },
            
            timerDowm(){
                clearInterval(this.timer);
                if((new Date().getTime() - uni.getStorageSync('downTimer'))/1000 >= 20){
                    this.flag = true
                    clearInterval(this.timer);
                    uni.removeStorageSync('downTimer');
                } else {
                    this.flag = false
                }
                
                this.timer = setInterval(()=>{
                    console.log(111);
                    if((new Date().getTime() - uni.getStorageSync('downTimer'))/1000 >= 20){
                        this.flag = true
                        clearInterval(this.timer);
                        uni.removeStorageSync('downTimer');
                    } else {
                        this.flag = false
                    }
                },1000)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .loadMore{
        .btn{
            width: 200rpx;
            height: 88rpx;
            
            text-align: center;
            line-height: 88rpx;
            color: #FFFFFF;
        }
        .colorGray{
            background-color: #c3c3c3;
        }
        .colorBlue{
            background-color: skyblue;
        }
    }
</style>