javascript - 如何同步重复onclick函数

Question

我有以下功能

function removecost(e,parent) {

        e.preventDefault();
        var current_Explanation = parent;
        var other_Explanations = current_Explanation.siblings('.repeatingcostsection');


        if (other_Explanations.length === 0) {
            alert("You should atleast have one Cost Section");
            return;
        }
        current_Explanation.slideUp('slow', function() {
            current_Explanation.remove();

            // reset Explanation indexes
            other_Explanations.each(function() {
               resetAttributeNames($(this));
            })

        })
}

该函数没有做任何特殊的事情。它在删除图标的 onclick 属性上调用，并检查 current_Explanation 的同级数量。如果它们大于零，则删除 current_Explanation。如果同级长度为 0，则会发出一条消息“您至少应该有一个成本部分”。

如果用户缓慢单击图标，该功能绝对可以正常工作。但是，如果用户连续快速单击图标，则不会显示警报消息，并且所有 block 都会被删除，因为

I think

other_Explanations.each(function() {
               resetAttributeNames($(this));
            });

is not completed properly.

Answer 1

您需要禁用该按钮，直到整个处理完成

function removecost(e,parent) {

        e.preventDefault();

        $(e.target).prop('disabled', true); //disable it here


        var current_Explanation = parent;
        var other_Explanations = current_Explanation.siblings('.repeatingcostsection');


        if (other_Explanations.length === 0) {
            alert("You should atleast have one Cost Section");
            return;
        }
        current_Explanation.slideUp('slow', function() {
            current_Explanation.remove();

            // reset Explanation indexes
            other_Explanations.each(function() {
               resetAttributeNames($(this));
            })

           $(e.target).prop('disabled', false); //enable it again
        })
}

请注意，您需要在向上滑动完成后启用它。