Question

每次鼠标移动时，jQuery中的mousemove - 事件都会触发，这可能导致每秒数百个事件执行。假设我们有这段代码片段。

$(document).on('mousemove', function(e){

    /**
    *    This piece of code checks if the mouse is within a 50px range 
    *    on either side of the middle of the page. 
    *    If is, it shows a set of elements (contained in the action_dots variable).
    */

    var treshold = 50;
    var action_dots = $('.branch[open][focus]').children('.branch-line').children('.action-dot');
    var opacity = action_dots.css('opacity');

    if(e.pageX >= ($(window).width()/2 - treshold) && e.pageX <= ($(window).width()/2 + treshold)){
        if(opacity == 0){
            action_dots.transition({ opacity: 1 }, 100);
        }
    }
    else{
        if(opacity == 1){
            action_dots.transition({ opacity: 0 }, 100);
        }
    }
});

每次事件执行时声明这些变量是否有效？由于必须找到与var action_dots选择器匹配的所有元素，因此您可能认为这是性能负担。或者jQuery可以以某种方式缓存var action_dots的内容？同样的问题适用于使用opacity检查动作点'var opacity css-property。

Answer 1

就效率而言，对于鼠标移动的每个像素运行代码并不是非常有效。您可以做的是在鼠标停止移动x毫秒后运行该代码。像这样：

var mouseTimer;
$(document).on('mousemove', function(e) {
    clearTimeout(mouseTimer);
    mouseTimer = setTimeout(function() {    
        var treshold = 50;
        var action_dots = $('.branch[open][focus]').children('.branch-line').children('.action-dot');
        var opacity = action_dots.css('opacity');

        if (e.pageX >= ($(window).width() / 2 - treshold) && e.pageX <= ($(window).width() / 2 + treshold)) {
            if (opacity == 0) {
                action_dots.transition({ opacity: 1 }, 100);
             }
        }
        else {
            if (opacity == 1) {
                action_dots.transition({ opacity: 0 }, 100);
            }
        }
    }, 50); // runs 50ms after mouse movement stops.
});

Answer 2

根据我的评论：如果没有动态添加点，您只需在$(document).on调用之外声明action_dots，以便在页面就绪时间填充一次。

$(function(){ // JQuery ready - modern version

    var action_dots = $('.branch[open][focus]').children('.branch-line').children('.action-dot');

    $(document).on('mousemove', function(e){

        /**
        *    This piece of code checks if the mouse is within a 50px range 
        *    on either side of the middle of the page. 
        *    If is, it shows a set of elements (contained in the action_dots variable).
        */

        var treshold = 50;
        var opacity = action_dots.css('opacity');

        if(e.pageX >= ($(window).width()/2 - treshold) && e.pageX <= ($(window).width()/2 + treshold)){
            if(opacity == 0){
                action_dots.transition({ opacity: 1 }, 100);
            }
        }
        else{
            if(opacity == 1){
                action_dots.transition({ opacity: 0 }, 100);
            }
        }
    });
});

JQuery选择器是代码中最慢的部分，但可能只需运行一次（或者每次将新项添加到页面时至少只运行一次 - 如果它是动态的）。

如果你想要一个特定的例子，请发布整个JS（只是因为你错过了JQuery“ready wrapper” - 未显示）。

在jQuery的“mousemove”-event中声明变量

2 个答案: