Question

我创建了一个动画菜单，当用户光标位于屏幕右侧的20px范围内时，该菜单会打开。我想阻止菜单打开，如果用户光标在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

我同意善主的回答。这是最好的方法，但要回答你的问题

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

我们必须检查现有的计时器，请参阅下面的评论。

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');
        }                   
    });
}

Javascript清除mousemove上的超时

3 个答案: