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。

Answer 2

以下是使用Local SessionStorage访问这些计时器值的示例：

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

普通的Javascript：相当于jQuery $ .data（'key'，value）？

2 个答案:

选项1

选项2