标签：javascript variables scope event-handling timeout

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

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

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

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

这是一个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);
});

解决方法:

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

标签：javascript,variables,scope,event-handling,timeout
来源： https://codeday.me/bug/20190831/1778877.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。