Issue with execution order in javascript

Question

I'm relatively new to javascript so please hold it against me.

I have a bit of code which should give the user a little time to reach the submenu from the base-menu. My problem is that the code keeps executing in a weird order.

Here is the code:

function onFocusOut() {
    var tester = 0;
    setTimeout(function(){menuReset(tester)},1000);
}

function menuReset(tester) {    
    var hoverCheck = function (event) {
        alert("#navBase a has focus"); //is fired, but to late...
        var tester = event.data.varTester;
        var tester = 1;
    };

    jQuery('#navBase').on('mousemove', 'a', { varTester: tester }, hoverCheck);
    jQuery('#navBase').off('mousemove', 'a', { varTester: tester }, hoverCheck);

    alert(tester);   //This keeps firing first, before the alert in hoverCheck

    if(tester == 1){
        alert("tester = 1");
        return;
    }

    else {
        jQuery('#navBase ul').hide();
        jQuery('#navBase').css({'width': ''});
        jQuery('#navBaseAnchor').css({
            'width': '', 'color': '', 
            'font-size': '', 
            'border-bottom-style': '', 
            'border-bottom-width': '', 
            'border-bottom-color': ''});

        tester = 0;
    }
}

Now I keep getting the alert that "tester" is 0, before the hoverCheck function is executed (which should set "tester" to 1) and fires the alert within that function.

Could someone tell me what I'm doing wrong?

lwm · Accepted Answer · 2012-08-08 08:08:01Z

1

I am also fairly new to JS, but should you also be watching out for variable scope errors too?

You have declared tester locally in onFocusOut() and in menuReset(tester), and then called it as a global var outside?

From answers.oreilly.com

LOCAL - Are those that are specific to a function and only work on it.

GLOBAL - Are those that are not defined within a function and may also serve to functions unless the function has not required that variable.

answered Aug 8, 2012 at 8:08

lwm

1921 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Marcelcolt Over a year ago

I actually called it globally at first, but since it didn't get passed to hoverCheck() i starrted passing it locally too.

Tiago Sippert · Accepted Answer · 2013-06-11 16:33:50Z

1

Nevermind people... I found a way around it all. Currently i'm setting a .focus() to the anchor involved on mouseOver. (and of course blur() on mouseleave) Then it's real easy to check the currently focussed element using document.activeElement.

So problem solved, altough in a bit different way.

edited Jun 11, 2013 at 16:33

Tiago Sippert

1,3307 gold badges24 silver badges33 bronze badges

answered Aug 8, 2012 at 13:23

Marcelcolt

535 bronze badges

Comments

dokaspar · Accepted Answer · 2012-08-08 08:18:17Z

0

alert(tester) is the first line of code that is executing something you notice as a user. The two function calls jQuery().on() and jQuery().off() are only attaching event handlers. If you want to see a "1" in the alert, you have to quickly move your mouse before hoverCheck is executed. But probably you cannot move your hand faster than JavaScript reaching the next line, which is the alert() with tester equals "0".

edited Aug 8, 2012 at 8:18

answered Aug 8, 2012 at 7:55

dokaspar

8,74414 gold badges76 silver badges105 bronze badges

2 Comments

Marcelcolt Over a year ago

Aha, thanks. Man i've been at this for days now and this is actually a mayor set back... Do you know another way to check if an element is currently hovered? (momenteraly at the point of dicarting the entire sub-menu-mess)

Marcelcolt Over a year ago

Hmmm... i meant discarting of course. I tried anything from mouseenter, to mouseover, mousemove, to mousein. And i know it isn't focus...

ChrisHarris2012 · Accepted Answer · 2012-08-09 21:53:16Z

-1

A little bit different approach would be to set a Javascript timeout() to make the submenu disappear after a certain amount of time if a certain condition isn't met.

Check out this JSFiddle example

Best of luck!

answered Aug 9, 2012 at 21:53

ChrisHarris2012

4042 silver badges6 bronze badges

1 Comment

Marcelcolt Over a year ago

You may or may not have checked out my initial code above, but that's precisely what i did. Problem was that the condition you mention was supposed to be "hover". Thing is, javascript can't detect if a element is hovered right now. After a work-around for the hover-part i still use a timeout.

Collectives™ on Stack Overflow

Issue with execution order in javascript

4 Answers 4

1 Comment

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related