如何在 Vue.js 中使删除请求延迟 1 秒

Question

我有通过 API 调用获取的产品，用户可以将它们放入购物车。所以，它们也可以被删除，但我希望它在 1 秒后从前端删除，因为删除按钮上有一个动画。所以我的购物车如下所示：

因此，当 bin 按钮单击时，它会立即被删除，但我希望它被删除 1 或 2 秒。所以为此我的代码是这样的：

<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>

所以我什至不知道为什么它会立即被删除而不是等待 1 秒。

Answer 1

您可以尝试延迟实际的方法调用

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

Answer 2

这里的问题是您只是在延迟加载标志，而不是实际操作本身。将你的调度动作也移动到 setTimout 中。

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