javascript - 纯 Javascript : equivalent of jQuery $. 数据 ('key' ，值)？

Question

我正在使用 jQuery 的一些函数，现在我想让它们成为纯 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);       
});

我需要知道如何将其放在纯JS中来设置超时数据以及如何清除超时数据。

Answer 1

如果您正在寻找与原始代码等效的内容，请记住 jQuery 作为一种工具旨在弥合浏览器不一致的问题。以下内容适用于支持 addEventListener、document.querySelector 和 dataset 的较新浏览器。另请注意 mouseenter和 mouseleave 最初是 proprietary to Internet Explorer ，而其他浏览器最近才采用这两个事件。 YMMV。

选项 1

这可行，但我不太熟悉将计时器存储为 DOM 元素的任意属性的含义。这比选项 2 更好，因为它适用于任何不透明值 timer(假设 setTimeout 的规范是返回值可以是任何值，而不仅仅是可序列化的值)像数字)。

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);
});

选项 2

此选项假定 setTimeout 返回一个可序列化的值，这对于浏览器通常是正确的(但对于 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);
});

请注意，这两个选项都假设您不关心 element 变量使任何包含的命名空间变得困惑。使用IIFE如果这与您有关。