javascript - Jquery - 由于类(class)发生变化，双击时遇到麻烦

Question

我有一个按钮。 onclick 我正在更改该按钮的类，但是当我双击它的更改类时。我的所有功能 取决于当前类如何禁用双击或使请求在第一次单击时完成。

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

            }
         });
    }
}

像下面这样从 Controller 调用函数

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

Answer 1

你需要的是“throttle”功能或“debounce”功能。

Throttling is a means by which we can limit the number of times a function can be called in a given period. For instance, we may have a method that should be called no more than 5 times per second.

你可以使用下划线 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内触发了第二次“点击”事件，则忽略