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

jQuery assign event handler with timeouts per element

本文关键字：超时 事件处理 程序 分配 元素 jQuery      更新时间：2023-09-26

对我来说很有趣。我有一个视频播放器的控制显示在悬停。最初，我用CSS做了这个，但不得不改变策略javascript与浏览器的全屏api玩得很好(顺便说一句，这意味着你总是在视频上悬停)。

我的新方法是为mousemove设置一个事件处理程序，为视频的容器添加一个类并设置超时以删除它，如果超时已经设置，则清除它。这是完美的，但逻辑不能扩展到一个以上的玩家。

TLDR:我如何扩展我的逻辑扩展到一个以上的视频容器?time变量的范围需要包含在每个元素事件中，但也需要包含在处理程序之外，以便可以从一个事件清除到下一个事件(在同一元素上)。

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

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

HTML: 

<div class="cont">
    <div class="controls">controls</div>
</div>
JavaScript: 

var time;
$('body').on('mousemove', '.cont', function(){
    var thiis = $(this);
    if (time){
        clearTimeout(time);
    }
    thiis.addClass('showControls');
    time = setTimeout(function(){
        thiis.removeClass('showControls');
    }, 2000);
});

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

$('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);
});
相关文章：