Idle event on mouse move - how to stop script permanently on mouse move

Question

I've got problem with my code. What I'm trying to achive:

Create loop in which div #news-main-page-wrap is fading in and fading out when user is not moving mouse/scroll page etc.

When user starts to move script have to break no matter if #news-main-page-wrap is visible or not.

I've managed to create this loop of fading in and fading out however I wasn't able to make it to break it.

We were trying to make it happen by .bind with user ControlAltDel however it doesnt work properly.

My current code is:

jQuery(document).ready(function( $ ){

 idleTimer = null;
idleState = false;
idleWait = 20000;

(function ($) {

    $(document).ready(function () {

        $('*').bind('mousemove keydown scroll', function () {

            clearTimeout(idleTimer);

            if (idleState == true) { 

                // Reactivated event


            }

            idleState = false;

            idleTimer = setTimeout(function () { 

                // Idle Event
                   $('#news-main-page').removeClass('d-none');
                  $("#news-main-page-wrap").delay(20000).fadeOut(500); 
                  $("#news-main-page-wrap").delay(20000).fadeIn(); 
                  $("#news-main-page-wrap").delay(20000).fadeOut(500);
                  $("#news-main-page-wrap").delay(20000).fadeIn();
                  $("#news-main-page-wrap").delay(20000).fadeOut(500); 
                  $("#news-main-page-wrap").delay(20000).fadeIn(); 
                  $("#news-main-page-wrap").delay(20000).fadeOut(500);
                  $("#news-main-page-wrap").delay(20000).fadeIn();

                idleState = true; }, idleWait);
        });

        $("body").trigger("mousemove");
        $("body").mousemove(function() {
          $("#news-main-page").stop();
        });

    });
}) (jQuery)

  });

We were trying to make it work with this code:

jQuery(document).ready(function( $ ){
  idleTimer = null;
idleState = false;
idleWait = 1000;
(function ($) {

    $(document).ready(function () {
    var myFunc = 
         function () {

        clearTimeout(idleTimer);
              if (idleState == true) { 
            // Reactivated event
        }

        idleState = false;

        idleTimer = setTimeout(function () { 
            // Idle Event
            $('#news-main-page').removeClass('d-none');
            $("#news-main-page").delay(1500).fadeOut(); 
            $("#news-main-page").delay(1500).fadeIn(); 
            $("#news-main-page").delay(1500).fadeOut();
           $("#news-main-page").delay(1500).fadeIn(); 
            $("#news-main-page").delay(1500).fadeOut(); 

            idleState = true; }, idleWait);
        };


        $("body").mousemove(function() {
          $('*').unbind('mousemove keydown scroll',myFunc);
          $("#news-main-page").stop();
        });
            $('*').bind('mousemove keydown scroll',myFunc);  

    });
}) (jQuery)

});

Here's JS Fiddle:

https://jsfiddle.net/2Lrxehz8/

If anyone could help me I would be grateful. :)

Answer 1

I guess you need something like this:

jQuery(document).ready(function( $ ){

let idleTimer = null,
    loopTimer = null,
    idleWait  = 1000;

(function ($) {

    $(document).ready(function () {
      //Cache the query
      let $animatedElement = $('#news-main-page');
      
      let animateElements = function(){
      	$animatedElement.delay(1500).fadeOut(); 
        $animatedElement.delay(1500).fadeIn(); 
      };
      
      let myFunc = function () {
      	
				
        clearInterval(loopTimer);
        clearTimeout(idleTimer);
        $animatedElement.stop(true);
        
        
        idleTimer = setTimeout(function () { 
          //Idle Event
          //Loop the animation
          loopTimer = setInterval(function(){
          	animateElements();
          }, 3000);
          
          //Call animate elements once to prevent additional delay
          //from setInterval call
          animateElements();
          
        }, idleWait);

      };

       $('*').bind('mousemove keydown scroll',myFunc);
       //Start the idle loop
       myFunc();

    });
}) (jQuery)
  
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="news-main-page">
  <p>Hello World</p>
  <button>Change color</button>
</div>

Edit:

To stop the animation loop permanently you can move the stop code out of the idle handler function, also unbind the 'mousemove keydown scroll' events so they no longer trigger:

jQuery(document).ready(function( $ ){

let idleTimer = null,
    loopTimer = null,
    idleWait  = 1000;

(function ($) {

    $(document).ready(function () {
      //Cache the query
      let $animatedElement = $('#news-main-page'),
          $allElements = $('*');

      let animateElements = function(){
        $animatedElement.delay(1500).fadeOut(); 
        $animatedElement.delay(1500).fadeIn(); 
      };

      let stopAnimationLoop = function() {
        clearInterval(loopTimer);
        clearTimeout(idleTimer);
        $animatedElement.stop(true);
      };

      let handleUserAction = function() {
        $allElements.unbind('mousemove keydown scroll', handleUserAction);
        stopAnimationLoop();
      };

      let myFunc = function () {

        idleTimer = setTimeout(function () { 
          //Idle Event
          //Loop the animation
          loopTimer = setInterval(function(){
            animateElements();
          }, 3000);

          //Call animate elements once to prevent additional delay
          //from setInterval call
          animateElements();

        }, idleWait);

      };

       $allElements.bind('mousemove keydown scroll', handleUserAction);
       //Start the idle loop
       myFunc();

    });
}) (jQuery)

});

You can try it here