Javascript 防止'；单击'；多次触发事件+；褪色问题

早上好，伙计们。对我正在制作的简单jQuery库有问题。它允许用户通过一些按钮在图像集合中循环，同时在计时器上旋转这些图像。我的问题是，用户能够多次单击按钮，将淡入动画排队并反复重复，例如，用户单击按钮5次>同一图像淡入/淡出5次>库移动到下一个图像

我试过使用：

$（'homeGalleryImage li a'）。解除绑定（'click'）

触发click事件后，然后重新绑定：

$（'homeGalleryImage li a'）.bind（'click'）

完成后，但这只是在按下按钮一次后删除单击事件，并且从不重新绑定到它

我还尝试通过以下方式禁用按钮：

$（'homeGalleryImage li a'）.attr（'disabled'，true）

没用

第二个问题是，如果在图像处于过渡状态时单击某个按钮，下一个图像将显示为“褪色”，好像不透明度已降低？很奇怪。。。以下是按钮单击的代码：

var i = 1;
var timerVal = 3000;
$(function () {
    $("#homeGalleryControls li a").click(function () {
        var image = $(this).data('image');
        $('#galleryImage').fadeOut(0, function () {
            $('#galleryImage').attr("src", image);
        });
        $('#galleryImage').fadeIn('slow');
        $('.galleryButton').attr("src", "/Content/Images/Design/btn_default.gif");
        $(this).find('img').attr("src", "/Content/Images/Design/btn_checked.gif");
        i = $(this).data('index') + 1;
        if (i == 4) {
            i = 0;
        }
        timerVal = 0;
    });
});

以下是在计时器上循环浏览图像的代码：

//Cycle through gallery images on a timer
window.setInterval(swapImage, timerVal);
function swapImage() {
    $('#galleryImage').fadeOut(0, function () {
        var imgArray = ["/Content/Images/Design/gallery placeholder.jpg", "/Content/Images/Design/1.jpg", "/Content/Images/Design/2.jpg", "/Content/Images/Design/3.jpg"];
        var image = imgArray[i];
        i++;

        if (i == 4) {
            i = 0;
        }

        $('#galleryImage').attr("src", image);
        $('#galleryImage').fadeIn('slow');
    });
    var currentButton = $('#homeGalleryControls li a img').get(i - 1);
    $('.galleryButton').attr("src", "/Content/Images/Design/btn_default.gif");
    $(currentButton).attr("src", "/Content/Images/Design/btn_checked.gif");
}

我意识到使用插件可能是一个更好的主意，但我对jQuery非常陌生，我想学习一些东西，而不是使用一些现成的代码

非常感谢您的帮助

谢谢
您可以尝试向元素添加一些内容来取消单击事件吗

比如说

$(".element").click(function(e) {

    if ( $(this).hasClass("unclickable") ) {
        e.preventDefault();
    } else {

        $(this).addClass("unclickable");
        //Your code continues here
        //Remember to remove the unclickable class when you want it to run again.

    }

}):

在您的情况下，您可以尝试在单击时添加一个复选框

$('#homeGalleryImage li a').attr('data-disabled', "disabled");

然后在你的点击事件中

if ( $(this).attr("data-disabled" == "disabled") {
  e.preventDefault();
} else {
  //Ready to go here
} 

编辑

下面是一个工作示例，显示元素变得不可访问
 如果要确保只触发一次已注册事件，应使用jQuery的：

.one（事件[，数据]，处理程序）返回：jQuery

描述：将处理程序附加到元素的事件。对于每个事件类型，每个元素最多执行一次处理程序

见示例：

使用jQuery：

使用vanilly JS：

我只是尝试在点击代码完成后删除“unclickable”类，但它似乎什么也没做：（下一步我将尝试你的其他建议，直到为你准备一个JSFIDLE示例，给我一两分钟：）尝试了第二个建议，但也没有成功。似乎解除绑定/绑定一经完成就可以工作，但似乎没有重新绑定？很奇怪。谢谢你@Duane你可以在JSFIDLE上举个例子吗？在JSFIDLE中玩了一下，发现是我使用的jQuery版本导致了褪色/不透明度问题，我使用的是'jQuery-1.5.1.min.js'，而JSFIDLE中的版本是1.72，效果很好。感谢您的帮助，我已将此标记为已回答：）
// add an even listener that will run only once
$("#click_here_button").one("click", once_callback);

// add a listener that run only once
button.addEventListener('click', once_callback, {capture: true, once: true});