just need a little help here. My problem is, how can I count the seconds when i hover a specific element. Like for example when I hover a button, how can i count the seconds did i stayed in that button after I mouseout?

just need a little help here. My problem is, how can I count the seconds when i hover a specific element. Like for example when I hover a button, how can i count the seconds did i stayed in that button after I mouseout?

• javascript
• jquery

7 Answers 7

An alternate solution using setInterval. DEMO HERE

var counter = 0;
var myInterval =null;
$(document).ready(function(){
    $("div").hover(function(e){
        counter = 0;
        myInterval = setInterval(function () {
            ++counter;
        }, 1000);
    },function(e){
        clearInterval(myInterval);
        alert(counter);
    });
});

A simple example

var timer;
// Bind the mouseover and mouseleave events
$('button').on({
    mouseover: function() {
        // set the variable to the current time
        timer = Date.now();
    },
    mouseleave: function() {
        // get the difference
        timer = Date.now() - timer;  
         console.log( parseFloat(timer/1000) + " seconds");
        timer = null;        
    }
});

Check Fiddle

How about this quick plugin I just knocked out, which will work on multiple elements, and without using any global variables:

(function($) {
    $.fn.hoverTimer = function() {
        return this.on({
            'mouseenter.timer': function(ev) {
                 $(this).data('enter', ev.timeStamp);
             },
             'mouseleave.timer': function(ev) {
                 var enter = $(this).data('enter');
                 if (enter) {
                     console.log(this, ev.timeStamp - enter);
                 }
              }
         });
    };
})(jQuery);

Actually disabling the functionality is left as an exercise for the reader ;-)

Demo at http://jsfiddle/alnitak/r9XkX/

IMHO, anything using a timer for this is a poor implementation. It's perfectly trivial to record the time without needing to use an (inaccurate) timer event to "count" seconds. Heck, the event object even has the current time in it, as used above.

This is exam:

var begin = 0;
var end = 0;

$('#btn').hover(function () {
   begin = new Date().getTime();
});

$('#btn').leave(function () {
   end = new Date().getTime();
   sec = (end - begin) / 1000;
   alert(sec);
});

One way to go about it would be the event.timeStamp method :

var initial_hover, exit_hover;
$('#ele').hover(
    function(event){
        initial_hover = event.timeStamp
        console.log(initial_hover);
    },
    function(event){
        exit_hover = event.timeStamp
        $(this).html(exit_hover - initial_hover);
        console.log(exit_hover);
    }
);

jsfiddle

You've tagged the question with JQuery, so here's a jQuery solution.

$(element).on('mouseover', function(e){
    $(e.target).data('hover-start', new Date().getTime());
});

$(element).on('mouseout', function(e){
    // count the difference
    var difference = new Date().getTime() - $(e.target).data('hover-start');
    // clean up the data
    $(e.target).data('hover-start', undefined);

    console.log('Mouse was over for', difference/1000, 'seconds');
});

use setInterval and store value in variable. call the function on mouserover.

function mouseover(){
  var start = 0;
  setInterval(function(){
    start++;
    var count = start;
  }, 1000);
}