javascript - 鼠标移动时的空闲事件 - 如何在鼠标移动时永久停止脚本

Question

我的代码有问题。我想要实现的目标:

创建循环，其中当用户不移动鼠标/滚动页面等时，div #news-main-page-wrap 淡入和淡出。

当用户开始移动脚本时，无论 #news-main-page-wrap 是否可见，脚本都必须中断。

我已经成功地创建了这个淡入和淡出的循环，但是我无法打破它。

我们试图通过用户 ControlAltDel 进行 .bind 来实现这一点，但它无法正常工作。

我当前的代码是:

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)

  });

我们试图让它与以下代码一起工作:

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)

});

这是 JS fiddle :

https://jsfiddle.net/2Lrxehz8/

如果有人能帮助我，我将不胜感激。 :)

Answer 1

我想你需要这样的东西:

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>

编辑:

要永久停止动画循环，您可以将停止代码移出空闲处理函数，同时取消绑定(bind)“mousemove keydownscroll”事件，以便它们不再触发:

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)

});

你可以试试here