Jquery - 双击时遇到麻烦，因为类的变化

Question

我有一个按钮。 onclick 我正在更改该按钮的类，但是当我双击其更改类时。我所有的功能depend on current class 如何禁用双击或在第一次单击时完成请求。

function data() {
    lastScrollTop = 0;
    document.getElementById("expand-dataset-btn").disabled = false;
    var id = event.target.id
    var allChildern = null
    if(!$(".id_"+event.target.id).hasClass('minus-symbol')){
        $(".id_"+event.target.id).removeClass('plus-symbol').addClass('minus-symbol')
        $.ajax({

            },
            success : function(result) {

            }
         });
    }else{
        $(".id_"+event.target.id).addClass('plus-symbol').removeClass('minus-symbol')
        $.ajax({

            },
            success : function(result) {

            }
         });
    }
}

从控制器调用函数，如下所示

htmlDataId += "<a onclick=\"data()\" title='View' id="+row[primaryField]+">

Answer 1

您需要的是“节流”功能或“去抖”功能。

限制是一种方法，我们可以通过它来限制函数在给定时间段内可以调用的次数。例如，我们可能有一个每秒调用次数不超过 5 次的方法。

您可以使用下划线underscore official website

或

您可以使用以下代码：

/*trigger specific eventhandler when the event is idle for specific time*/
function debounce(fn, delay, self) {
    var timer = null;
    return function () {
        var context = self ? self : this, args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function () {
        fn.apply(context, args);
        }, delay);
    };
}
//use in the following way
 $input.on('click',debounce(clickCallback,250));

那么如果在 250ms 内触发了第二个“点击”事件，则会被忽略

Answer 2

您应该等待 ajax 完成

function data() {

    lastScrollTop = 0;
    document.getElementById("expand-dataset-btn").disabled = false;
    var id = event.target.id;
    var allChildern = null;

    if($(".id_"+ id).hasClass("disable"))
    {
          event.preventDefault();             
    }

    if(!$(".id_"+ id).hasClass('minus-symbol')){
        //make control disable
        $(".id_"+ id).addClass('disabled');
        $.ajax({

            },
            success : function(result) {
            //change here after success
            $(".id_"+ id).removeClass('plus-symbol').addClass('minus-symbol');
            //remove control disable
            $(".id_"+ id).removeClass('disabled');
         });
    }else{
       //make control disable
        $(".id_"+ id).attr('disabled', true);
        $.ajax({

            },
            success : function(result) {
            //change here after success
              $(".id_"+ id).addClass('plus-symbol').removeClass('minus-symbol');
              //remove control disable
              $(".id_"+ id).attr('disabled', false);
            }
         });
    }
}