Javascript jQuery为每个元素分配带有超时的事件处理程序

对我来说很有趣。我有一个视频播放器，它的控件显示在悬停状态。起初，我用CSS实现了这一点，但不得不将策略更改为javascript，以便更好地使用浏览器全屏api（顺便说一句，这意味着您总是在视频上悬停）

我的新方法是为视频容器的

mousemove

设置一个事件处理程序，它添加一个类并设置一个超时来删除它，如果已经设置了超时，则清除它。这是完美的，但逻辑不能扩展到多个玩家

TLDR:如何扩展逻辑以扩展到多个视频容器？

time

变量的范围需要包含在每个元素事件中，但也需要在处理程序之外，以便可以从一个事件清除到下一个事件（在同一元素上）

谢谢你的帮助-这些逻辑问题对我来说总是很难

这是一个例子。您会注意到，当您将鼠标悬停限制为一个元素时，它工作得很好，但当您扩展到页面上的其余元素时，会出现问题

HTML:

---

可以使用jQuery的数据方法存储时间变量，该方法可以存储每个元素上的数据

$('body').on('mousemove', '.cont', function(){

  var thiis = $(this),
      // get the time from the data method
      time = thiis.data("timer-id");

   if (time){
     clearTimeout(time);
   }

  thiis.addClass('showControls');

   var new_time = setTimeout(function(){
    thiis.removeClass('showControls');
   }, 2000);

   // save the new time
  thiis.data("timer-id", new_time);
});

---

这看起来像是打字错误。如果您使用此

，可能会更清楚一些，例如。。。。

var time;

$('body').on('mousemove', '.cont', function(){

    var thiis = $(this);

    if (time){

        clearTimeout(time);
    }

    thiis.addClass('showControls');

    time = setTimeout(function(){

        thiis.removeClass('showControls');
    }, 2000);
});

$('body').on('mousemove', '.cont', function(){

  var thiis = $(this),
      // get the time from the data method
      time = thiis.data("timer-id");

   if (time){
     clearTimeout(time);
   }

  thiis.addClass('showControls');

   var new_time = setTimeout(function(){
    thiis.removeClass('showControls');
   }, 2000);

   // save the new time
  thiis.data("timer-id", new_time);
});