时间戳

首页 > 解决方案 > 鼠标移动时的空闲事件 - 如何创建循环？

javascript - 鼠标移动时的空闲事件 - 如何创建循环？

问题描述

我试图在我的网站上创建这种代码：当用户空闲时 div "#news-main-page" 必须每 15 秒淡入和淡出。

但是当用户移动鼠标时，我希望功能中断。

当新闻主页可见时用户中断功能保持可见，当新闻主页隐藏时用户中断功能保持隐藏。

如何做到这一点？

现在，如果用户在空闲一段时间后开始移动鼠标，它会像这样工作，函数仍然执行

下面是我的代码

jQuery(document).ready(function( $ ){
    idleTimer = null;
    idleState = false;
    idleWait = 15000;
    (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").delay(15000).fadeOut(); 
                $("#news-main-page").delay(15000).fadeIn(); 
                $("#news-main-page").delay(15000).fadeOut(); 

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

            $("body").trigger("mousemove");
        });
    }) (jQuery)
});

标签： javascriptloops

解决方案

只需在新闻主页上调用 .stop()

    $(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(15000).fadeOut(); 
            $("#news-main-page").delay(15000).fadeIn(); 
            $("#news-main-page").delay(15000).fadeOut(); 

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

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

推荐阅读