Javascript 单击事件延迟启动动画

我试着制作一个图库，你点击缩略图像，它会打开刚刚缩放的图像，然后我在图像旁边添加箭头以便导航，问题是当你第一次点击箭头时，一切都很好，但点击越多，后面就会开始动作，例如，如果你第一次点击，它会立即淡出图像，如果您单击八次箭头，它将仅在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;
            });
        });
    });
}

每次执行

$（this）.children（“img”）.load

，都会将另一个load Eventhandler附加到div内的图像。但每次单击按钮时，都会执行不断增长的事件处理程序堆栈。 所以你必须改变

.load（函数（）

到

.one（“加载”，function（）

这将向映像添加一个一次性事件处理程序。 这是一种干净的方法，而不仅仅是停止动画队列