当我使用3个setTimeouts单击一个元素时，我试图实现以下功能：

• setTimeout 1 =等待500毫秒以添加类（将某些内容动画化为100%进度）
• setTimeout 2 =再等待400毫秒，使用css类将该元素动画化为scale（0）
• setTimeout 3 =再等待500毫秒，使用jquery remove（）从网格中删除该元素

每当我快速单击另一个元素时，前一个单击元素的setTimeouts就会停止，并在单击时运行，直到您单击另一个元素并执行相同的操作。
x1c 0d1x的数据
再看一下上面的图片，如果我点击第一个元素，setTimeout 1就会运行，如果我点击另一个元素，另外两个setTimeout就会停止并且永远不会运行，但是如果我不点击另一个元素，最后一个点击的元素就可以正常工作。
下面是我的代码。我在这里做错了什么？只有js超时的问题，而不是css/html。

function complete_item_anim(obj) {
    obj.find(".orderitemprogressbar_text_status").fadeOut(200);
    obj.find(".orderitemprogressbar_text_done").fadeIn(200);
    obj.find('.order_item_box').addClass('completed');
}
$(".grid-item").click(function(event) {
    elem = $(this);
    $(this).find('.oitpb_percent').text('100%');
    $(this).find('.oitpb_time').text('0m');
    $(this).find('.oitpb_time_group').css('max-width', 0);
    $(this).find('.orderitemprogressbar_green').css('width', '100%');
    setTimeout(function() {
        complete_item_anim(elem);
        setTimeout(function() {
            elem.find('.order_item_box').addClass("removed");
            setTimeout(function() {
                elem.remove();
            }, 500);
        }, 600);
    }, 600);
});

字符串