定时器使用：setTimeout(function(){ },200);

最新推荐文章于 2024-10-14 15:28:14 发布

原创最新推荐文章于 2024-10-14 15:28:14 发布 · 4.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端JS

本文介绍如何使用JavaScript的定时器（setTimeout和setInterval）结合鼠标悬停（mouseenter）和鼠标离开（mouseleave）事件，实现弹框显示与隐藏功能。通过具体代码示例，详细解释了定时器在实际项目中的运用，以及如何避免重复调用和资源浪费。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面例子实现鼠标放上去，显示弹框，鼠标移开，移除弹框，定时器控制200毫秒执行悬浮框加载数据
$(document).ready(function(){
   //显示号码下发通道
   var daodian;
   $(".mbstyle").live("mouseenter",function(){
      var that = $(this);
      that.parent().attr("title","");
      var id = $(this).attr("data");
      var sendDate = $(this).attr("createDateStr");
      var requestData=  $T.utils.getRequestSid()+"&smsTaskContactForm.id="+id+"&smsTaskContactForm.sendDate="+sendDate;;
      daodian = setTimeout(function(){
         $ST.getChannelDetail(requestData,that)
      },200);
   });
   $(".mbstyle").live("mouseleave",function(){
      clearTimeout(daodian);
      $(this).find('#channelDetail').remove();
   });
});

另外还有一种js定时器：setInterval()

间歇调用

　　间歇调用与超时调用类似，只不过它会按照指定的时间间隔重复执行代码，直至间歇调用被取消或页面被卸载。设置间歇调用的方法是setInterval()，它接收的参数与setTimeout()相同。取消间歇调用的重要性远高于超时调用。

　　但是通常情况下，很少真正使用间歇调用，因为后一个间歇调用可能在前一个间歇调用结束之前调用。因此，我们通常会使用超时调用来模拟间歇调用

　　
参考：https://www.cnblogs.com/lengyuehuahun/p/5650030.html