Plain Javascript: equivalent of jQuery $.data('key',value)?

Question

I am using some functions with jQuery and now I want to make them plain JS.

$('#selector').mouseenter( function( e1 ) {
  var item = $(this);

  clearTimeout(item.data('hoverTimer'));
  var timer = setTimeout( function( e1 ) {
        //do stuff
    }   
  }, 50 );
  item.data('hoverTimer', timer);       
}).mouseleave( function( e2 ) {
  var item = $(this);

  clearTimeout(item.data('hoverTimer'));
  var timer = setTimeout( function( e2 ) {
    //do the other stuff
  }, 300 );
  item.data('hoverTimer', timer);       
});

I need to know how to put it in plain JS for setting the timeout data and how to clear the timeout data.

skeggse · Accepted Answer · 2015-03-03 05:47:22Z

If you're looking for something that is equivalent to your original code, keep in mind that jQuery as a tool is designed to bridge browser inconsistencies. The following is functional on newer browsers that support addEventListener, document.querySelector, and dataset. Also note that mouseenter and mouseleave were originally proprietary to Internet Explorer, and other browsers are only recently adopting the two events. YMMV.

Option 1

This works, but I'm not super familiar with the implications of storing the timer as an arbitrary property of the DOM element. This is better than option 2 in that it works for any opaque value timer (given that the specification for setTimeout is that the return value can be any value, not just serializable values like numbers).

var element = document.querySelector('#selector');
element.timer = null;

element.addEventListener('mouseenter', function() {
  // you probably want to ensure that element.timer is not null first
  // just replicating the original code
  clearTimeout(element.timer);
  element.timer = setTimeout(function() {
    // do stuff
  }, 50);
});

element.addEventListener('mouseleave', function() {
  clearTimeout(element.timer);
  element.timer = setTimeout(function() {
    // do the other stuff
  }, 300);
});

Option 2

This option assumes that setTimeout returns a value which is serializable, which is generally true for browsers (but not true for environments like Node.js).

var element = document.querySelector('#selector');
element.dataset.timer = '';

element.addEventListener('mouseenter', function() {
  // you probably want to ensure that element.timer is not null first
  // just replicating the original code
  clearTimeout(element.timer);
  element.dataset.timer = setTimeout(function() {
    // do stuff
  }, 50);
});

element.addEventListener('mouseleave', function() {
  clearTimeout(element.timer);
  element.dataset.timer = setTimeout(function() {
    // do the other stuff
  }, 300);
});

Note that both options assume you don't care about the element variable cluttering any containing namespaces. Use an IIFE if that concerns you.

Thank you for your answer. I've been playing with the jsfiddle.net/om0kvefe/4 ; (this one is updated) that @Stephn_R provided and it worked, and now with full plain js even, but your code made it clear I had to delete the e1,e <code>function(e1)</code> and this was causing undefined vars inside the setTimeout. So I'm gonna check his answer. I know yours works too.

Stephen Rodriguez · Accepted Answer · 2015-03-03 05:41:24Z

1

Here is an example using Local SessionStorage in order to access these timer values:

var hoverTimer;

$('#selector').mouseenter( function(e) {
    clearTimeout(sessionStorage.getItem('hoverTimer'));
    // Create a new timer
    var timer = setTimeout( function(e) {
        // do stuff
    }, 50);
    // Update the sessionStorage with our new timer
    sessionStorage.setItem('hoverTimer', timer);
}).mouseleave( function(e) {
    clearTimeout(sessionStorage.getItem('hoverTimer'));
    var timer = setTimeout( function(e) {
        // do the other stuff
    }, 300);
    // Update sessionStorage with our new time
    sessionStorage.setItem('hoverTimer', timer);
});

JSFiddle

edited Mar 3, 2015 at 5:41

answered Mar 3, 2015 at 4:57

Stephen Rodriguez

1,0371 gold badge12 silver badges22 bronze badges

14 Comments

thednp Over a year ago

I know that, my question is about storing some value over time and use it or clear it on certain events, check my code more careful.

Stephen Rodriguez Over a year ago

So you are looking to run a timer on mouseenter and mouseleave. But mouseleave would set the length of time as a dataset value.

thednp Over a year ago

Has nothing to do with dataset, I believe it's about sessionStorage. I am reading now.

Stephen Rodriguez Over a year ago

you can use sessionStorage to hold some value temporarily. Shall I edit the code for how to do that?

thednp Over a year ago

Be my guest, you may get a small bounty :)

|

Collectives™ on Stack Overflow

Plain Javascript: equivalent of jQuery $.data('key',value)?

2 Answers 2

Option 1

Option 2

1 Comment

14 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Option 1

Option 2

1 Comment

14 Comments

Your Answer

Sign up or log in

Post as a guest

Related