Javascript清除鼠标移动超时

Question

我创建了一个动画菜单，当用户光标位于屏幕右侧 20 像素以内时会打开该菜单。如果用户光标在 2 秒内移出该区域，我想阻止菜单打开，但我正在努力解决 Javascript 超时问题。到目前为止，我的代码如下所示：

HTML

Javascript // 定时器变量 var timer;

    function openToolbar()
    {               
        // Only execute for desktop
        $('.no-touch').on('mousemove',function(event) {

            // Toolbar and Window width
            var tableToolbar = $('.ac-table-toolbar'),
                winWidth = $(window).width();

            // If cursor enters right hand side of the screen start the timer
            // and execute after 2 seconds                  
            if(event.pageX > (winWidth - 20)) {

                // Timeout
                timer = setTimeout(function()
                {
                    // Add active class to toobar and css transition will animate it
                    // to open position
                    tableToolbar.addClass('active').removeClass('notActive');
                }, 2000);
            }

            // If mouse pointer leaves right hand side of the screen and
            // still has notActive class cancel the timeout to prevent
            // the toolbar from opening
            if(event.pageX < (winWidth - 20) && tableToolbar.hasClass('notActive'))
            {
                clearTimeout(timer);
            }

            // Toolbar has active class so we know its visible
            if(tableToolbar.hasClass('active') && event.pageX < (winWidth - 220))
            {
                // Clear timeout (if needed?)
                clearTimeout(timer);

                // Remove active class and css transition will return it to docked position
                tableToolbar.removeClass('active').addClass('notActive');
            }                   
        });
    }

动画由活动的 notActive 类触发的 CSS 过渡处理。

请任何人指出我正确的方向。非常感谢。

Answer 1

这个任务太复杂了。大量的mousemove 事件会减慢您的页面速度。尝试使用另一种方法：

HTML：

<div id='rightActivateZone'></div>

CSS：

#rightActivateZone {
    background-color: red; // change to transparent for your purpose
    height: 100%;
    width: 20px;
    position: fixed;
    top: 0;
    right: 0;    
}

JS：

var timer;
$('#rightActivateZone').on('mouseenter', function() {
    timer = setTimeout(function() {
        alert('fire!'); // your code to show menu is here              
    }, 2000);
});
$('#rightActivateZone').on('mouseleave', function() {
    clearTimeout(timer);
});

JSFiddle demo

Answer 2

我同意 Finelords 的回答。这是最好的方法，但要回答您的问题

演示：http://jsfiddle.net/robschmuecker/EZJv6/

我们还必须检查计时器是否存在，请参阅下面的 cmets。

JS：

var timer = null;

function openToolbar() {
    // Moved these out of event to prevent re-processing.
    // Toolbar and Window width
    var tableToolbar = $('.ac-table-toolbar'),
        winWidth = $(window).width();
    // Only execute for desktop
    $('.no-touch').on('mousemove', function (event) {
        // If cursor enters right hand side of the screen start the timer
        // and execute after 2 seconds

        // here you are setting a timer on every mousemove, even the ones when the cursor is over the active bar so we need to fix by checking if
        if (event.pageX > (winWidth - 20) && tableToolbar.hasClass('notActive') && timer == null) {
            // Timeout
            console.log('setting timeout');
            timer = setTimeout(function () {
                // Add active class to toobar and css transition will animate it to open position
                tableToolbar.addClass('active').removeClass('notActive');
            }, 500);
        }
        // If mouse pointer leaves right hand side of the screen and
        // still has notActive class cancel the timeout to prevent
        // the toolbar from opening
        if (event.pageX < (winWidth - 20) && tableToolbar.hasClass('notActive') && timer != null) {
            clearTimeout(timer);
            timer = null;
            console.log('cancelling timeout 1');
        }
        // Toolbar has active class so we know its visible
        if (tableToolbar.hasClass('active') && event.pageX < (winWidth - 20)) {
            // Clear timeout (if needed?)
            clearTimeout(timer);
            timer = null;
            console.log('cancelling timeout 2');
            // Remove active class and css transition will return it to docked position
            tableToolbar.removeClass('active').addClass('notActive');
        }
    });
}

openToolbar();

Answer 3

与其清除超时，不如让它运行，但要跟踪最新的鼠标位置

var currentX;    

function openToolbar()
{               
    // Only execute for desktop
    $('.no-touch').on('mousemove',function(event) {

        currentX = event.pageX;

        // Toolbar and Window width
        var tableToolbar = $('.ac-table-toolbar'),
            winWidth = $(window).width();

        // If cursor enters right hand side of the screen start the timer
        // and execute after 2 seconds                  
        if(currentX > (winWidth - 20)) {

            // Timeout
            timer = setTimeout(function()
            {
                // check the mouse position after the timeout
                if(currentX > (winWidth - 20)) {
                    // Add active class to toobar and css transition will animate it
                    // to open position
                    tableToolbar.addClass('active').removeClass('notActive');
                }
            }, 2000);
        }

        // Toolbar has active class so we know its visible
        if(tableToolbar.hasClass('active') && currentX < (winWidth - 220))
        {
            // Remove active class and css transition will return it to docked position
            tableToolbar.removeClass('active').addClass('notActive');
        }                   
    });
}