Countdown timer not working in vue js pop up

user_15308849 0
Viewed 919

I am trying to redirect to another website after countdown. The redirect works, however the countdown decrease only one time.

For example: I have set the counter to 5. But when the pop up opens, its shows 4 and doesn't decrease further.

<p>Redirecting in {{ counter }}</p>

<script>
export default {
    name: "modal",
    data() {
        return {
            toggleModal: false,
            counter: 5
        }
    },
    methods: {
        showModal() {
            this.toggleModal = true;
            this.countDown();
        },
        countDown() {
            if(this.counter > 0) {
                this.counter--;
                setTimeout(() => {
                    window.location.href = 'https://www.google.com';
                }, 5000);
            }
        },
    }
};
</script>
vuejs2 vue-component vuetify.js vue.js javascript
1 Answers

Basically what your code is doing now is waiting 5 seconds and redirecting, one side effect of it redirecting is it decrements countdown by 1.

What you need to do is decrement the counter, every second until it becomes zero, then on the next tick you want to do the redirect.

We do this by first checking to see what the count down is at. If it is above zero we want to wait for a second, then decrement the counter by one, and check again.

countDown() {
    //If the counter has not reached the end
    if(this.counter > 0) {
        //Wait 1 second, then decrement the counter
        setTimeout(()=>{
            this.counter--;
            this.countDown();
        },1000)
    }
    else
    {
        //Count down has reached zero, redirect
        window.location.href = 'https://www.google.com';
    }
},
user_20737380
Related