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

Posted 2023-05-07

【中文标题】Jquery - 双击时遇到麻烦，因为类的变化

【英文标题】：Jquery - Getting trouble on double click because change in class

【发布时间】：2016-03-24 19:10:49

【问题描述】：

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

【问题讨论】：

可能是您的流程出错了。将警报放在功能和跟踪中。每次它进入函数内部。

如果您也可以发布您的 HTML

您应该等待 ajax 完成。在success之后更改课程。

@ParthTrivedi 我也试过了。如果我不这样做，则意味着请求会转到相同的方法，并且会再次获取数据

这个元素是什么？ $(".id_"+event.target.id)

【参考方案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 内触发了第二个“点击”事件，则会被忽略

【参考方案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);
            
         );
    

【讨论】：

第二次 ajax 调用仅在未设置类的情况下执行。这将解决他的即时第二次呼叫/双击问题。

不！ ajax 调用在这里什么都不做！

他更改了类而不是类的基础，这件事有效。

这行不通。好像我不改变类然后它调用相同的 ajax 方法。这也是同样的问题

而这个(".id_"+event.target.id) 在成功块中不起作用