javascript - 点击事件延迟开始动画

Question

我正在尝试制作一种画廊，您单击缩略图，它会打开刚刚缩放的图像，然后我在图像旁边附加箭头以便能够导航，问题是当您首先单击箭头时时间一切都很好，但是你点击的次数越多，就会开始执行操作，例如，如果你点击第一次，它会立即淡出图像，如果你点击八次箭头，它只会在 2 秒后淡出图像。

arrows.on('click', function(){
  if(action === false){
  action = true;
  if($(this).hasClass("left")){
    if(parseInt(curr_img) - 1 > 0){
        curr_img--;
    }else{
        curr_img = 12;
    }
    $(".premii").fadeTo("fast", 0, function(){
        $(this).children("img").attr("src", path + curr_img + '.jpg');
        if(diploma['diploma_' + curr_img].pos === "ver"){
            if(!$(this).children("img").hasClass("ver")){
            $(this).children("img").addClass("ver");
        }
        }else{
            $(this).children("img").removeClass("ver");
        }
        $(this).children("img").load(function(){
            curr_height = $(".premii").height();
            $(".premii").fadeTo("fast", 1, function(){
                action = false;
            });
        });
    });
}

Answer 1

每次执行 $(this).children("img").load 时，都会将另一个 Load-Eventhandler 附加到 div 内的图像。但是，每次单击按钮时都会执行这个不断增长的事件处理程序堆栈。所以你必须改变
.load(function()
到
.one("load", function()
这会向图像添加一次性事件处理程序。这是一种干净的方法，而不仅仅是停止动画队列。