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，那么它会发出消息“你至少应该有一个费用部分”。

如果用户在图标上慢慢点击，该功能绝对正常。但是，如果用户在图标上非常快地点击连续点击，则不会显示警报消息，并且因为

而删除所有块

我认为

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

未正确完成。

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

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

Answer 2

你需要一个去抖功能或限制功能，这可能会限制你的代码运行的次数。

这是一个例子：

 function throttle(fn, threshhold, scope) {
        threshhold || (threshhold = 250);
        var last,
            deferTimer;
        return function () {
            var context = scope || this;

            var now = +new Date,
                args = arguments;
            if (last && now < last + threshhold) {//last execute time
                // store timer
                clearTimeout(deferTimer);
                deferTimer = setTimeout(function () {
                    last = now;
                    fn.apply(context, args);
                }, threshhold);
            } else {
                last = now;
                fn.apply(context, args);//after Nth , have to wait threshhold to execute(N+1)th time.
            }
        };
    }

你可以这样使用它：

  $btn.on('click',throttle(function(){
      //your codes
  },300));

这意味着您的代码将在300毫秒内执行一次

你也可以使用underscore来达到同样的效果

如何同步重复onclick功能

2 个答案: