تأخر المشكلة مع مسج التركيز() و طمس() الأحداث

Question

أنا في محاولة لخلق الملاحة القائمة التي تستخدم بعض مسج.أردت لوحة المفاتيح للمستخدمين لتكون قادرة على تجربة نفس الماوس المستخدمين, لذلك أنا تكرار وظائف وجدت في بلدي hover() معالج الحدث في بلدي focus() و blur() معالجات الأحداث.لسبب ما, هذا هو مما تسبب في تأخر ملحوظ في فايرفوكس وإنترنت إكسبلورر عندما ينقر المستخدم على الرابط الذي لا يحدث عند focus() و blur() رمز يؤخذ بها.كيف يمكن أن تذهب حول مسرعة هذا ؟ لقد فعلت الكثير من تحسين بلدي محدودة جافا سكريبت المعرفة سوف تسمح ، ولكن أنا لم أر أي "تسريع" لذا أعتقد أنها قد تكون ذات صلة إلى كيف أن هذه المتصفحات التعامل مع الأحداث.

هل هناك أي شيء رئيسي أنا يطل ؟ أو هل هناك أي طرق بديلة الاحتفاظ وصول مستخدمي لوحة المفاتيح في حين لا تستخدم هذه الأحداث ؟

        var statePad=0;

            function stateChanger(ourStatePad) {
                //the purpose of this function is to translate the current state of the menu into a different graphical representation of the menu state.
                var tempVar=ouStatePad;
                var tempArray = new Array;
                tempArray[5]=0;
                for (var x=0;x < 5;x++) {
                    tempArray[x]=tempVar % 10;
                    tempVar=(tempVar-tempArray[x])/10;
                }
                for (var arrayIndex=4;arrayIndex>=0;arrayIndex--) {
                   //Calculate the proper position in our CSS sprite, based on the each link's state, as well as it's neighbors'.
                    $(".block").eq(4 - arrayIndex)
                    .css(
                        "background-position",
                        //x-position
                        ((4 - arrayIndex) * -100) + "px " + 
                        //y-position
                        (tempArray[arrayIndex] + ((3 * tempArray[(arrayIndex) + 1]) * -30))) + "px";
                }
            }


        function hoverState(index,sign) {
            var placeholder=Math.pow(10,4-index);

            if (statePad != placeholder*2)
                statePad += (placeholder * sign);
            stateChanger(statePad);
}

        .click(function() {
            var index=$("#navbar a").index(this);
            statePad=Math.pow(10,(4-index))*2;
            stateChanger(statePad);
            $(".active").removeClass("active");
            $(this).addClass("active");
        })


        .hover(
            function () {
                hoverState($("#navbar a").index(this),1);
            },
            function () {
                hoverState($("#navbar a").index(this),-1);
            });

        $("#navbar a").focus( 
            function() {
                hoverState($("#navbar a").index(this),1);
            }
        );

        $("#navbar a").blur( 
            function() {
                hoverState($("#navbar a").index(this),-1);
            }
        );  
    });

يمكنك التحقق من ذلك هنا

Answer 1

وأنا تحل هذا الحادث كاملة، من النوع. أدركت أن مشكلتي ليست حقا تأخر، الذي كان مجرد عرض من أعراض "تضارب الأحداث".

والمشكلة بقدر ما أستطيع أن أقول هو أن يتم تشغيل focus() إما عن طريق الجدولة لأكثر من رابط أو mousedown() على عنصر يمكن أن يتلقى التركيز. لذلك، في كل مرة يتم النقر على الرابط، فإنه يزداد التركيز. ولكن، حدث click() ليست كاملة حتى يتم تحرير الماوس. وبالتالي فإن التأثير الذي كنت أشاهده في فايرفوكس وإنترنت إكسبلورر نتيجة لتأخير بسيط بين mousedown() وmouseup(). حاولت فقط مبادلة خارج الحدث .click() معالجة في قانون بلدي لmousedown()، ونظرا لأنه مجرد حدث واحد أن كنت اشاهد بها لأنني قررت أن دمج ذلك في بلدي وظيفة () hoverState. انتهى بي الأمر مع هذا:

function hoverState(e) {
    var index = $(e.target.parentNode).prevAll().length;
    if (e.type == 'mousedown') {
        statePad=Math.pow(10,(4-index))*2;
        $(".active").removeClass('active');
        $("#"+ e.target.id).addClass('active');
}
else {
   var sign = (e.type === 'mouseenter' || 
                 e.type === 'focus')? 1 : -1;
 var placeholder=Math.pow(10,4-index);
    if (statePad != placeholder*2)
        statePad += (placeholder * sign);
 $('h1').text(statePad + " " + e.type);
    }
    stateChanger(statePad);
}

$("#navbar a").bind("mouseenter mouseleave focus blur mousedown", hoverState);

ولكن تسبب هذا بعض السلوك الغريب أن ثمل المتغير statePad. I عادت إلى رمز التي قدمت روس كاميرا لي، وبدأت إعادة النظر في الأشياء. حاولت بها في الأوبرا، وهو ما لم يتم حتى الآن، وأنه يعمل على ما يرام. حاولت ذلك في سفاري وكروم، وأنها عملت غرامة كالمعتاد. حاولت ذلك في فايرفوكس، مجرد محاولة للحصول على التعامل مع ما يجعلها مختلفة، و... انها تعمل!

ونظرت إلى الوراء في قانون بلدي، وتبين أن كنت لا تزال ملزمة وظيفة hoverState إلى الحدث mousedown(). لست متأكدا بالضبط لماذا هذا يعمل، ولكنه لا يفعل. فإنه بإصلاح مشكلة في IE، كذلك. خنق، فإنه يسبب مشكلة جديدة في كروم، انها طفيفة لدرجة أنني لست حتى الذهاب للقلق.

وأنا لا أعتقد أنني يمكن أن يكون قادرا على حل هذه دون مساعدة روس "، لذلك أريد أن أشكره مرة أخرى على كل من مساعدته في ذلك.

Answer 2

هناك الكثير من لا لزوم لها إطالة سلسلة نطاق في التعليمات البرمجية الخاصة بك ، أطول سلسلة النطاق سوف يستغرق وقتا أطول لحلها.يمكن أن يكون تقصير التالية

$("navbar a").click(blah) 
             .hover(foo,bar)
             .focus(foo)
             .blur(bar);

نأمل أن هذا ينبغي أن يؤدي إلى أقل من تأخر ملحوظ.إذا كنت لا تزال ترى ملحوظ تأخر بعد إجراء هذا التغيير, الرجاء نشر رمز معالج الحدث وظائف كما قد تكون هناك التحسينات التي يمكن إدخالها على هذا الرمز أيضا.

تحرير:

ردا على تعليقك, هل يمكن الحصول على المؤشر من خلال وظيفة باستخدام مرت في event الكائن target الممتلكات التي سوف يكون العنصر الذي تم رفع الحدث على.لذا للحصول على مؤشر من <a> عنصر في كل <a> العناصر في <ul> مع معرف الناف بار, يمكننا استخدام حقيقة أن كل <a> يرد داخل <li>, ولذلك المؤشر في كل حالة سوف تكون هي نفسها.مع هذا العقل ، event.target سوف يكون <a> عنصر الحدث انقر فوق أثيرت ، event.target.parentNode سوف يكون الوالد عنصر <a> وهو <li>

للحصول على مؤشر, هل يمكن استخدام

function hoverState(e) { 
    // get the index of the <a> element, which will be the same
    // as the index of the <li> that contains it in the <ul>
    //
    var index = $(e.target.parentNode).prevAll().length; 
    //
    // get the sign
    var sign = (e.type === 'mouseenter' || e.type === 'focus')? 1 : -1;
} 

سيؤدي هذا إلى إزالة الحاجة إلى وظيفة مجهول معالجات الأحداث التفاف hoverState.

هنا بعض إعادة صياغة قانون

var statePad=0;

// the purpose of this function is to translate 
// the current state of the menu into a different 
// graphical representation of the menu state.
//
function stateChanger(ourStatePad) {

    var tempVar=ourStatePad;
    var tempArray = [0,0,0,0,0];
    for (var x=0;x < 5;x++) {
        tempArray[x]=tempVar % 10;
        tempVar=(tempVar-tempArray[x])/10;
    }
    // Calculate the proper position in our CSS sprite, 
    // based on the each link's state, as well as it's neighbors'
    //
    var arrayIndex=4;
    while (arrayIndex--) {

        $("#rightpostheader div.block").eq(4 - arrayIndex)
            .css(
                "backgroundPosition",
                //x-position
                ((4 - arrayIndex) * -100) + "px " + 
                //y-position
                (tempArray[arrayIndex] + ((3 * tempArray[(arrayIndex) + 1]) * -30))) + "px";
    }

}


function hoverState(e) {
    var index = $(e.target.parentNode).prevAll().length;
    var sign = (e.type === 'mouseenter' || 
                e.type === 'focus')? 1 : -1;
    var placeholder=Math.pow(10,4-index);

    if (statePad != placeholder*2)
        statePad += (placeholder * sign);
    stateChanger(statePad);
}

$("#navbar a")
    .click(function(e) {
        // might be able to rework this into using hoverState too
        var $this = $(e.target);

        // get the index of the parent <li>
        var index= $this.parent().prevAll().length;

        statePad=Math.pow(10,(4-index))*2;

        stateChanger(statePad);

        $("#navbar a").removeClass('active');
        $this.addClass('active');
    })
    .bind("mouseenter mouseleave focus blur", hoverState);