Pause on hover not working in clearInterval and setInterval I have made this code to make ticker pause on hover working But not working Can you please help me to make ticker pause on hover working

This is part to make ticker pause on hover:

interval = setInterval(options.speed), 
options.pauseOnHover && $(obj).hover(function () {
    clearInterval(interval)
}, function () {
    interval = setInterval(options.speed)
})

CodePen Demo: https://codepen.io/orabipro/pen/rNzjRZR

This is the full code:

(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;

      list.not(':first').hide();
      
      var interval = setInterval(function(){
        
        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(options.speed), 
        options.pauseOnHover && $(obj).hover(function () {
            clearInterval(interval)
        }, function () {
            interval = setInterval(options.speed)
        })

      }, options.speed)
    });
  };
})(jQuery);

CodePudding user response：

Your question is a little vague on what precisely you want, but I'm going to assume that you want the "ticker" to stop flipping through when you hover over it. After playing around with the code for a while, there's quite a few issues with the scope of different things. With your original code, when you were trying to clearInterval(), you were doing so inside of the set interval you initially made. I'm not sure specifically if that works, but it would seem that that was part of the problem. I altered your code and moved the jQuery hover event outside the scope of that inner function (which I named ticker for convenience).

Also, you can ignore changes in HTML since I need the CDN for jQuery to work in the snippet.

let interval;

(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;

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

      function ticker() {
        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(ticker, options.speed);

      options.pauseOnHover &&
        $(obj).hover(
          function () {
            clearInterval(interval);
          },
          function () {
            interval = setInterval(ticker, options.speed, jQuery);
          }
        );
    });
  };
})(jQuery);

//API

$("#slide").list_ticker({
  speed: 2000,
  effect: "slide",
  pauseOnHover: true
});

#container {
    text-align:center;
    width:500px;
    margin:0 auto 0 auto;
}

h1 {
    font-family:verdana;
}

ul {
    background:#333;
    color:#fff;
    padding:10px 20px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    width:100px;
    display:block;
    height:15px;
    clear:both;
    margin:0 auto 0 auto;
    text-align:center;
}

ul li {
    list-style:none;
    font-family:verdana;
    font-size:12px;
}

<html>
  <head>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>
    <ul id="slide">
      <li>First Item</li>
      <li>Second Item</li>
      <li>Third Item</li>
      <li>Fourth Item</li>
      <li>Fifth Item</li>
    </ul>
  </body>
</html>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>