自定义 Jquery 插件自动前进错误

Question

我正在尝试将自动前进添加到我自己制作的 jquery 插件中。滑块有 下一个和上一个按钮。

我创建了一个点击模拟功能

  var autoAdvance = function(){
    $('#next').trigger('click');
  };

我希望 autoAdvance 功能 如果 auto 设置为 true 则触发，如果控件（下一个和上一个按钮）是点击。这部分 - 停止自动前进 - 不起作用

  if(settings.auto === true){
    setInterval(autoAdvance, settings.pause);
    // Stop auto advance if controls are clicked 
    $('.controlls a').on('click', function(){
      clearInterval(autoAdvance);  
    });
  };

我哪里错了？谢谢！

Answer 1

尝试这样的事情：

var interval;
if(settings.auto === true){
   interval = setInterval(autoAdvance, settings.pause);
   // Stop auto advance if controls are clicked 
   $('.controlls a').on('click', function(){
     clearInterval(interval);  
   });
};

如果你能创建一些 jsFiddle 来检查它就完美了，但无论如何请尝试我的回答。

Answer 2

$(document).ready(function(){
  
  var autoInterval = null;
  var settings ={};
  settings.auto = true;
  settings.pause = 2000; //3 sec
  $('.message span').fadeOut();
  
  var autoAdvance = function(){
    $('.next').data("auto", true);
    $('.next').trigger('click');
  };
  
  
  autoInterval = setInterval(autoAdvance, 5000);
    // Stop auto advance if controls are clicked 
  $('.next').on('click', function(){
    
    $('.message span').fadeIn(400).delay( 1000 ).fadeOut(400);
    var isAuto = $('.next').data("auto");
    if(isAuto !==true){
      clearInterval(autoInterval);
      $('.message span').fadeIn();
    }
    
    $('.next').data("auto",false);
  });
  
  
});

.message{
  min-height:50px;
  min-width:100px;
  border:1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="message"><span>clicked</span></div>
<button class="next">Next</button>

Answer 3

setInterval 部分应该如下所示

settings.intervalHandler = setInterval(autoAdvance, settings.pause);
...
clearInterval(settings.intervalHandler);

而且 - 也许

控件 - 可能有错字？
如果代码运行不止一次，settings.auto仍然成立

Answer 4

这是我提出的工作解决方案，用于 模拟每 n 毫秒在 'Next' 按钮上单击 并在 [=13] 时停止自动前进=]真实点击发生：

  // Auto advance
  if(settings.auto === true){

    var autoAdvanceInterval = null;

    $(window).load(function(){
      autoAdvanceInterval = setInterval(function(){
        $('#next').trigger('click');  
      }, settings.pause);
      // When a control or dot is clicked by user
      // stop autoadvance by clearInterval method 
      $('.controls a,.bullets li').click( function(event) {
        if (event.originalEvent !== undefined) {
          clearInterval(autoAdvanceInterval);
        }
      });
    });
  }

自定义 Jquery 插件自动前进错误

Custom Jquery plugin auto advance bug

javascript

jquery

slider

setinterval

clearinterval