jQuery滚动列表ticker悬停暂停功能setInterval/clearInterval失效求解

错误根因 #

• setInterval 传参错误：调用setInterval时第一个参数必须传入需要周期性执行的回调函数，原有代码仅传入了时间数值options.speed，创建的定时器无执行逻辑，完全无效
• 代码位置错误：定时器重置逻辑、hover事件绑定逻辑被放在了定时器的内部回调中，每执行一次滚动就会重复绑定hover事件、重复创建无效定时器，导致interval变量被多次覆盖，clearInterval无法匹配到正确的定时器ID
• hover恢复逻辑错误：鼠标移出恢复定时器时，同样没有传入滚动回调函数，创建的都是无效定时器

修复后完整代码 #

(function($){
  $.fn.list_ticker = function(options){
    
    var defaults = {
      speed:4000,
      effect:'slide',
      run_once:false,
      random:false,
      pauseOnHover: true,
    };
    
    var options = $.extend(defaults, options);
    
    return this.each(function(){
      
      var obj = $(this);
      var list = obj.children();
      var count = list.length - 1;
      var interval;

      list.not(':first').hide();

      // 封装滚动逻辑
      function tick() {
        list = obj.children();
        list.not(':first').hide();
        
        var first_li = list.eq(0)
        var second_li = options.random ? list.eq(Math.floor(Math.random()*list.length)) : list.eq(1)
        
        if(first_li.get(0) === second_li.get(0) && options.random){
            second_li = list.eq(Math.floor(Math.random()*list.length));
        }
    
        if(options.effect == 'slide'){
            first_li.slideUp();
            second_li.slideDown(function(){
                first_li.remove().appendTo(obj);
            });
        } else if(options.effect == 'fade'){
            first_li.fadeOut(function(){
                obj.css('height',second_li.height());
                second_li.fadeIn();
                first_li.remove().appendTo(obj);
            });
        }
        count--;
        
        if(count == 0 && options.run_once){
            clearInterval(interval);
        }
      }

      // 初始化定时器
      interval = setInterval(tick, options.speed);

      // 只绑定一次hover事件
      if(options.pauseOnHover) {
        $(obj).hover(function () {
            // 鼠标悬停清除定时器
            clearInterval(interval);
        }, function () {
            // 鼠标移出重新启动定时器
            interval = setInterval(tick, options.speed);
        })
      }
    });
  };
})(jQuery);

内容的提问来源于stack exchange，提问作者Osama Orabi