How to make delay in delete request for 1 sec in Vue.js-CodePudding

I have products that are being taken with API calls and the user can put them into the cart. So, they can be also deleted but I want it to be removed from the front-end after 1 sec because there is an animation on the delete button. So my cart is like the one below:

So when the bin button clicked it is being deleted but immediately, I want it to be taken like 1 or 2 sec. So for this my code is like:

<template>
    <div id="delete-button"  @click.prevent="removeProductFromCart(item.id)">
        <input type="checkbox" id="checkbox">
        <div id="bin-icon">
            <div id="lid"></div>
            <div id="box">
                <div id="box-inner">
                    <div id="bin-lines"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import cartHelper from "../helpers/cartHelper";

export default {
    props: {
        item: Object,
    },
    data() {
        return {
            loading: false,
        };
    },
    methods: {
        removeProductFromCart(id) {
            cartHelper.removeFromCart(id, (response) => {
                this.loading = true;
                this.$store.dispatch('removeProductFromCart', {
                    cart: response.data,
                })
                setTimeout(() => this.loading = false, 1000);
            });
        },
    }
};
</script>

So I don't know even I set a timeout why it is being deleted immediately but not wait for 1 sec.

CodePudding user response：

Could you try delaying the actual method call

removeProductFromCart(id) {
    this.loading = true;
    setTimeout(() => {
        cartHelper.removeFromCart(id, (response) => {
            this.$store.dispatch('removeProductFromCart', {
                cart: response.data,
            })
            this.loading = false
        });
    }, 1000)

CodePudding user response：

The problem here is that you are only delaying the loading flag, but not the actual action itself. Move your dispatching action inside the setTimout too.

    removeProductFromCart(id) {
        cartHelper.removeFromCart(id, (response) => {
            this.loading = true;
            
            setTimeout(() => {
                this.$store.dispatch('removeProductFromCart', {
                   cart: response.data,
                })
                this.loading = false
            }, 1000);
        });
    }