Question

我有一个包含多个内部链接的导航栏。

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

并且，我有一个jQuery函数，每2秒运行一次。

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

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

问题在于，当我点击导航栏链接（使用href="#"）时，它会创建一个新的间隔实例，每2秒运行一次playSlideShow()。例如，如果我单击导航栏链接5次，幻灯片将在2秒内更改5次，而不是2秒内更改1次。

如何预防？

谢谢。

Answer 1

使用event.preventDefault()：

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

这将阻止链接重新加载页面。请注意，锚点需要包含在具有类navbar的元素中，以便此示例起作用：

<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

将间隔存储在变量中，然后在单击时删除间隔或忽略它。这是一个例子

//Initialize timer variable
var timer = false;

// Start timer
timer = setInterval(timerName, 1000);

// End timer
clearInterval(timer);
timer = false;

您需要的所有功能，只需在点击事件中添加：

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

如何防止href =＃激活jquery函数的多个实例

2 个答案: