Question

有趣的一个给我。我有一个视频播放器，当悬停时显示控件。最初，我用CSS做了这个，但不得不将策略更改为javascript，以便与浏览器全屏api一起使用（顺便说一句，这意味着你总是在视频上徘徊）。

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

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

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

这是一个jsFiddle example。当你将鼠标悬停在一个元素上时，你会发现它很有效，但是当你扩展到页面上的其他元素时会出现问题。

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

Answer 1

您可以使用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);
});

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

1 个答案: