Jquery-双击时遇到问题，因为类中发生了更改

Jquery - Getting trouble on double click because change in class

本文关键字：发生了 因为 双击 遇到 问题 Jquery-      更新时间：2023-09-26

我有一个按钮。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]+">

您需要的是"throttle"函数或"debounce"函数。

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

你可以使用下划线官方网站

或

您可以使用以下代码：

/*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内触发，则会忽略

您应该等待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);
            }
         });
    }
}
相关文章：