Question

$(document).on('click', '.view-details', function () {    
            if (Btn.find('.toggleText').text() === "View seller details") {
                $('#loadingIconRecommendations-' + similarCarId).show();
                toggleViewDetailsBtn($(this));
                shownInterest($(this));
            }
            else {
                toggleViewDetailsBtn($(this));
                hideClasses($(this));
            }
      }

我想在用户点击一次后立即禁用此点击，直到执行完整功能。

该函数有多个路径，因此在最初调用变量并将其设置为true，在多次调用时将其设置为false也很麻烦。

任何其他建议或方式来做到这一点。我试过.off但它没有用。

Answer 1

一种可能性是在注册事件的元素中添加一个类，并在选择器中排除该类：

$(document).on('click', '.view-details:not(.clicked)', function() {

在你的功能结束时：

$(this).addClass('clicked');

所以你的代码看起来像这样：

$(document).on('click', '.view-details:not(.clicked)', function() {
      if (Btn.find('.toggleText').text() === "View seller details") {
        $('#loadingIconRecommendations-' + similarCarId).show();
        toggleViewDetailsBtn($(this));
        shownInterest($(this));
      } else {
        toggleViewDetailsBtn($(this));
        hideClasses($(this));
      }
      $(this).addClass('clicked');
});

注意：这将在页面刷新之前有效。

<强> Demo

Answer 2

您可以使用jQuery的 prop 方法来禁用您的按钮。 Check here

    $(document).on('click', '.view-details', function () { 

                // Disable the button
                $(this).prop('disabled',true)

                /*
                 * Your code here
                 */
                // Enable the button
                $(this).prop('disabled',false) 
          }

修改

假设您使用Ajax来调用Api，因为该函数在ajax请求完成之前执行，在这种情况下您可以：

1 - 在Ajax成功函数中启用按钮

$.ajax({ success : function() { $('.view-details').prop('disabled',false); } })

2 - 使用ajax完整全局事件

$( document ).ajaxComplete(function() { // You might want to create function to handle this. $('.view-details').prop('disabled',false); });

Answer 3

当前答案的另一种方法。

如果单击按钮，您可以使用javascript变量进行存储。

//Store if we are running or not
var running = false;
$(document).on('click', '.view-details', function () {
    //Check if we are currently already running this function.
    if(running === false){
        //Set running to true to prevent this function from being called again.
        running = true;
        if (Btn.find('.toggleText').text() === "View seller details") {
            $('#loadingIconRecommendations-' + similarCarId).show();
            toggleViewDetailsBtn($(this));
            shownInterest($(this));
        } else {
            toggleViewDetailsBtn($(this));
            hideClasses($(this));
        }
        running = false;
    }
}

这将使其设置为运行，除非您已到达on函数的末尾。如果toggleViewDetailsBtn或hideClasses是异步的，那么这不会奏效。

如果需要异步并且调用返回成功回调，请执行以下操作：

//Store if we are running or not
var running = false;
$(document).on('click', '.view-details', function () {
    //Check if we are currently already running this function.
    if(running === false){
        //Set running to true to prevent this function from being called again.
        running = true;
        if (Btn.find('.toggleText').text() === "View seller details") {
            $('#loadingIconRecommendations-' + similarCarId).show();
            toggleViewDetailsBtn($(this));
            shownInterest($(this), success(){
                running = false;   
            });
        } else {
            toggleViewDetailsBtn($(this));
            hideClasses($(this));
            running = false;
        }

    }
}

Demo（灵感来源于经验性的回答）。

jquery防止多次单击或多个幻灯片切换执行

3 个答案: