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

我的代码有问题。我想要达到的目标是：

创建循环，当用户不移动鼠标/滚动页面时，div新闻主页包装淡入淡出

当用户开始移动时，无论新闻主页是否可见，脚本都必须中断

我成功地创造了一个淡入淡出的循环，但我没能打破它

我们试图通过.bind和用户控件altdel实现它，但是它不能正常工作

我目前的代码是：

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小提琴：

---

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

我想你需要这样的东西：

jQuerydocument.readyfunction${ 让idleTimer=null， loopTimer=null， idleWait=1000； 功能${ $document.readyfunction{ //缓存查询 让$animatedElement=$'news-main-page'； 设animateeelements=函数{ $animatedElement.delay1500.fadeOut； $animatedElement.delay1500.fadeIn； }; 设myFunc=函数{ clearIntervalloopTimer； clearTimeoutidleTimer； $animatedElement.stoptrue； idleTimer=setTimeoutfunction{ //空闲事件 //循环播放动画 loopTimer=setIntervalfunction{ 生物元素； }, 3000; //调用动画元素一次以防止额外延迟 //从setInterval调用 生物元素； }，闲置； }; $'*'。绑定'mousemove keydown scroll'，myFunc； //启动空闲循环 myFunc； }; }jQuery }; 身体{ 背景：20262E； 填充：20px； 字体系列：Helvetica； } 钮扣{ 背景：0084ff； 边界：无； 边界半径：5px； 填充：8px 14px； 字体大小：15px； 颜色：fff； } 你好，世界

变色

---

你知道一个事实，你有一个准备好的处理程序在一个准备好的处理程序中包装在一个闭包里吗？是的，但我把它放在Wordpress网站上，当他们需要这样的代码时，这是非常好的，但是当用户mousemove按键滚动做出任何动作时，如何使这个循环永久停止？我更新了答案，请看看这是否是您所需要的。但是，当我试图使它绑定“向下滚动键”并删除鼠标时，它不起作用。我不知道为什么keydown或scroll不起作用，请看我的小提琴：首先，要触发“keydown”事件，JSFIDLE中的输出窗口需要聚焦。只需单击窗口并尝试按一个键。其次，window scroll事件似乎不适用于星形“*”选择器，但它完美地绑定到其他元素。所以您还需要将滚动事件绑定到“窗口”。请看这里：HTH