Why Doesn't .on() Method Execute The First Handler?

var x; userList.on( 'mouseover', 'li', function(e) { console.log('1'); x = setTimeout( function() { doThis(); }, 700); },function(){ console.log('3');

Solution 1:

It seems you are confusing hover method which accepts 2 handlers(one for mouseenter and one for the mouseleave event) with the on method. You should just pass one callback function to the on method. The first function in this case is used as the optional data parameter and the second function is used as the handler:

.on( events [, selector ][, data ], handler )

data property of the event object refers to the passed function. You can invoke the function using () invocation operator:

userList.on( "mouseover", "li", function(e) {
    console.log('1');
    x = setTimeout( function() { 
        doThis();
    }, 700);
},function(event) {
    event.data(); // calls the first function// ...
});

Also note that mouseenter and mouseover are 2 different events. You should either listen to mouseover/mouseout or mouseenter/mouseleave.

And for clearing timeouts set by setTimeout function you should use clearTimeout, clearInterval is used for clearing intervals set by setInterval function.

var x;
userList.on({
   mouseenter: function() {
       x = setTimeout( function() { 
          doThis();
       }, 700);
   },
   mouseleave: function() {
      clearTimeout(x);
      // showProfile.css('display', 'none');// ...
   }
}, "li");