3

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?

7 Answers 7

2

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);
    });
});
9
  • This will not account for any values between 0 and 999 milliseconds for any second.. Instead you can set an interval to 30 milliseconds and divide by that number before outputting the value. Jul 24, 2013 at 7:08
  • A bit better which will account for that jsfiddle.net/sushanth009/WqeAD/1 Jul 24, 2013 at 7:12
  • @Sushanth-- Ofcourse I could have done that. But OP mentioned 'Count how many seconds' not milliseconds, so for 0-999 milliseconds its 0 second
    – Anupam
    Jul 24, 2013 at 7:13
  • @anu "1.5 seconds" is still a quantity of seconds.
    – Alnitak
    Jul 24, 2013 at 7:18
  • Thanks that's what i need. Thanks for the suggestions and ideas for my question guys. Jul 24, 2013 at 7:21
2

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

0
2

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.net/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.

1

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);
});
1
  • Why wouldn't you use the mouseout function of hover ?
    – Patsy Issa
    Jul 24, 2013 at 7:16
1

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

0

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');
});
1
  • 1
    why not use e.timeStamp ?!
    – Alnitak
    Jul 24, 2013 at 8:04
0

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.