Question

我有这个jquery效果很好，但我想阻止它模仿点击，如果用户实际点击一个标签...如果有人可以提供帮助那就太棒了！

//Homepage Tabs
    $('#lcontent .tab:first').show();   
    $('#llist li').click(function() {

    var thisTop = $(this).position().top;
    $('.pointer').animate( {'top': thisTop} );

    $('#llist li').removeClass('current');
    $(this).addClass('current');
    var id = $("li.current a").attr('href');
    $("#lcontent div").fadeOut(500).hide();
    $(id).fadeIn();
    return false;
});

setInterval((function(){
  var count = 0;
  var ul = $('#llist li');

  return function(){
    ul.eq(++count % ul.length).click();
  };
})(), 3000);

Answer 1

setInterval（和setTimeout）会返回您可以用来停止活动的ID。像这样更改你的代码：

var intervalId = setInterval(...)

然后你可以使用

停止我喜欢的区间

clearInterval(intervalId);

Answer 2

您可以查看event object中的某些属性，例如originalEvent：

var intervalID = null;

$('#llist li').click(function(event) {
   if('originalEvent' in event) {
      clearInterval(intervalID);
   }
});

// ....

intervalID = setInterval((function(){
// ...

当“正常”触发时，某些属性（如originalEvent）将出现在事件对象中。你仍然可以效仿这一点，但我猜你的情况会很好。

Answer 3

//assign interval to a variable
myInterval = setInterval((function(){
  var count = 0;
  var ul = $('#llist li');

  return function(){
    ul.eq(++count % ul.length).click();
  };
})(), 3000);

//then in a click event handler for a tab
myInterval=clearInterval(myInterval);

Answer 4

使用clearInterval功能，explained here。我还会考虑将“点击”拆分为自定义事件/绑定。

var autoToggleInterval = setInterval((function(){
  var count = 0;
  var ul = $('#llist li');

  return function(){
    ul.eq(++count % ul.length).trigger('tabs:show');
  };
})(), 3000);

$('#lcontent .tab:first').show();

$('#llist li')
  .bind('tabs:show', function() {
    // your code
  })
  .click(function() {
    if(autoToggleInterval) {
      clearInterval(autoToggleInterval);
      autoToggleInterval = false;
    }
    $(this).trigger('tabs:show');
  });

如果用户点击li，则停止间隔

4 个答案: