在jQuery中預防雙重動畫

Question

當用戶點擊速度過快時，如何阻止此功能發生兩次？

$(document).ready(function() { 
    $(".jTscroller a").click(function(event) { 
     event.preventDefault(); 
     var target = $(this).attr("href"); 
     $("#photo").fadeTo("fast", 0, function() { 
      $("#photo").attr("src",target); 
      $("#photo").load(function() { 
       $("#photo").fadeTo("fast", 1); 
      }); 
     }); 
    }); 
}); 

我遇到的問題是，如果用戶點擊太快元素不會褪色回來，它只是停留隱藏。

這個問題不是我認爲的問題。當我點擊相同的縮略圖時，它會嘗試加載相同的圖像並永久加載。 .stop()答案確實解決了雙重動畫，所以我接受了這個答案，但我的解決方案是檢查最後點擊的項目是否是當前顯示的項目。新腳本：

$(document).ready(function() { 
    $(".jTscroller a").click(function(event) { 
     event.preventDefault(); 
     var last = $("#photo").attr("src");     
     var target = $(this).attr("href"); 
     if (last != target) { 
      $("#photo").stop().fadeTo("fast", 0, function() { 
       $("#photo").attr("src",target); 
       $("#photo").load(function() { 
        $("#photo").fadeTo("fast", 1); 
       }); 
      }); 
     }; 
    }); 
}); 

Answer 1

那麼你在你的描述符中使用正確的單詞。使用stop()

$("#photo").stop().fadeTo("fast", 0, function() { 

Answer 2

你可以使用一個setTimeout功能，使點擊抓取之間的延遲。我的意思是，第二次點擊將在第一次點擊之後的某個時間後纔會被處理。它設置了點擊之間的時間間隔。

Answer 3

我相信你正在尋找的是.stop() http://api.jquery.com/stop/

$("#photo").stop(false, false).fadeTo() 

Answer 4

$(document).ready(function() { 
    var loaded = true; 
    $(".jTscroller a").click(function(event) { 
     if(!loaded) return; 
     loaded = false; 
     event.preventDefault(); 
     var target = $(this).attr("href"); 
     $("#photo").fadeTo("fast", 0, function() { 
      $("#photo").attr("src",target); 
      $("#photo").load(function() { 
       $("#photo").fadeTo("fast", 1); 
       loaded = true; 
      }); 
     }); 
    }); 
}); 

保持其狀態的跟蹤

Answer 5

我會阻止它這樣的：

var photo = $("#photo"); 
if (0 == photo.queue("fx").length) { 
    foto.fadeTo(); 
} 

我不同從stop，因爲它會只有當此元素上的所有動畫完成時纔會觸發。將元素存儲在變量中也會節省一些時間，因爲選擇器只需要抓取元素一次。

Answer 6

使用on()和off()：

$(document).ready(function() { 
    $(".jTscroller a").on('click', changeImage); 

    function changeImage(e) { 
     e.preventDefault(); 
     $(e.target).off('click'); 
     $("#photo").fadeOut("fast", function() { 
      this.src = e.target.href; 
      this.onload = function() { 
       $(this).fadeIn("fast"); 
       $(e.target).on('click', changeImage); 
      }); 
     }); 
    } 
});