href =＃がjquery関数の複数のインスタンスをアクティブにするのを防ぐ方法

Question

私は複数の内部リンクを持つnavbarを持っています。

<li><a href="#home">Home</a></li> 
<li><a href="#products">Products</a></li> 
<li><a href="#contactus">Contact Us</a></li> 

そして、私は2秒ごとに実行されるjQuery関数を持っています。

<script> 
$(function() { 
    setInterval(playSlideShow(), 2000); 

    function playSlideShow() { 
     // codes to change slide 
    } 
}); 
</script> 

問題は、私は（href="#"付き）ナビゲーションバーのリンクをクリックしたときに、それが2秒毎でplaySlideShow()を走る区間の新しいインスタンスを作成しています。たとえば、ナビゲーションバーリンクを5回クリックした場合、スライドは2秒で1回ではなく2秒に5回変更されます。

どうすればいいですか？

ありがとうございます。

Answer 1

使用event.preventDefault()：

$('.navbar a').on('click', function(event) { 
    event.preventDefault(); 
} 

これは、ページをリロードからのリンクを防ぐことができます。それがクリックされています、その後とき、変数に

<ul class="navbar"> 
    <li><a href="#home">Home</a></li> 
    <li><a href="#products">Products</a></li> 
    <li><a href="#contactus">Contact Us</a></li> 
</ul> 

Answer 2

ストアの間隔を、いずれかの間隔を削除するか、それを無視：アンカーは、この例が動作するためにクラスnavbarと要素内にラップする必要があることに注意してください。

if(!timer){ 
    // Timer is off, create new interval 
}