Vue.js中如何给删除请求设置1秒延迟后再移除前端购物车商品

• 你当前代码的执行顺序为：后端删除接口请求成功 → 立即触发$store.dispatch更新全局购物车数据 → 1秒后修改局部loading变量。页面购物车列表是基于全局store的购物车数据渲染的，只要store数据更新，对应商品会立刻被移除，后续的setTimeout仅修改了未和视图绑定的loading变量，不会产生延迟删除的效果。
• 模板内的checkbox未和删除操作做联动，原本设计的删除交互动画也没有被触发。

将store的更新逻辑移入setTimeout回调中，确保动画播放完成后再修改全局购物车数据，同时可以加重复点击拦截避免异常提交，修改后的代码如下：

<template>
    <div id="delete-button"  @click.prevent="removeProductFromCart(item.id)">
        <input type="checkbox" id="checkbox" :checked="loading">
        <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) {
            // 重复点击拦截
            if(this.loading) return
            // 触发删除交互动画
            this.loading = true
            cartHelper.removeFromCart(id, (response) => {
                // 延迟1秒更新全局购物车数据，等待动画播放完成
                setTimeout(() => {
                    this.$store.dispatch('removeProductFromCart', {
                        cart: response.data,
                    })
                    this.loading = false
                }, 1000) // 需调整延迟时长直接修改该数值即可，单位为毫秒
            });
        },
    }
};
</script>

如果不需要先调用后端接口，要等动画播放完成再调用后端删除接口，只需把cartHelper.removeFromCart的整段逻辑都移入setTimeout回调即可。

内容的提问来源于stack exchange，提问作者magic bean