关于js中存在多个定时器的处理问题

时间:2023-01-21 23:24:30

在项目中遇到过这样的情况:一个列表中需要对每一列数据做处理,而且当中用到了定时器,这就涉及到多个定时器的问题,之前遇到的是一个定时器的问题,所以问题还是比较好解决的,当要处理多个定时器,一起来看看下面的代码(这里以一个下拉列表的列子为案列)

var clearTime={};//预先定义了一个对象

var myNavbar=$("#myNavbar"),navItem=myNavbar.find(".nav-item");
navItem.hover(function(){
      var self=$(this);
      var _timer = $(this).attr('data-timer');//这个属性在这一列是唯一的
      clearTimeout(clearTime[_timer]);//每次进去先清除定时器,以防重复滑过的bug,这样弄可以避免污染其他定时器的影响
      clearTime[_timer]=setTimeout(function(){//保存到对象里面的一个属性
             self.find(".wrap-child").slideDown(300);
      },150)
},function(){
      var self=$(this);
      var _timer = $(this).attr('data-timer');
           clearTimeout(clearTime[_timer])
           clearTime[_timer]=setTimeout(function(){
               self.find(".wrap-child").slideUp(300);
   },150)
})