JS中SetTimeout和SetInterval使用初探

发布时间 - 2026-01-11 00:19:16    点击率:

一切尽在代码截图中,愿意和大家一起成长!可以喷,毕竟是菜鸟!  好了,废话不多说了,看具体实例代码吧!

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Title</title> 
</head> 
<body> 
<div class="wraper"></div> 
<div class="wraper1">abcd123441223432 </div> 
<button onclick="clearIt=window.clearInterval(clearIt)"> 
  Stop</button> 
<script> 
  window.onload = function () { 
    $('.wraper').html('12343242342') 
    setTimeout(function () { 
      $('.wraper').hide(); 
      setTimeout(function () { 
        $('.wraper1')[0].style.backgroundColor = 'red'; 
        console.log(new Date(),"in"); 
      },20000); 
      console.log(new Date(),"out"); 
    },10000); 
  } 
  var clearIt=self.setInterval("setIntervalTest()",1000); 
  function setIntervalTest () { 
    console.log('++++'); 
  } 
</script> 
<script type="text/javascript" src="jquery/jquery-min.js"></script> 
</body> 
</html> 

补充:下面看下setTimeout和setInterval的相同处及区别介绍

setTimeout和setInterval的相同处

setTimeout和setInteval 都是window对象的定时方法,它们语法基本上相同。它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码。

setTimeout和setInterval的区别

setTimeout方法是定时程序,也就是在什么时间以后干什么。干完了就拉倒。

setInterval方法则是表示间隔一定时间反复执行某操作。

如果用setTimeout实现setInerval的功能,就需要在执行的程序中再定时调用自己才行。

如果要清除定时器则根据创建定时器时使用的方法调用不同的清除方法:

例如:

timer=setTimeout('startShow()',2000);
clearTimeout(timer);

或者:

timer=setInterval('startShow()',2000);
clearInterval(timer);

以上所述是小编给大家介绍的JS中SetTimeout和SetInterval使用初探,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!


# settimeout和setinterval  # 使用  # JavaScript SetInterval与setTimeout使用方法详解  # JavaScript中setInterval的用法总结  # js中的setInterval和setTimeout使用实例  # 浅谈js的setInterval事件  # JavaScript中SetInterval与setTimeout的用法详解  # 解决js中的setInterval清空定时器不管用问题  # JavaScript中setInterval()用法举例详解  # 小编  # 都是  # 是在  # 都有  # 好了  # 菜鸟  # 过了  # 也就  # 在此  # 说了  # 则是  # 不多  # 给大家  # 还有一个  # 尽在  # 那段  # 就将  # 才行  # 所述  # 给我留言 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: Swift中switch语句区间和元组模式匹配  Laravel定时任务怎么设置_Laravel Crontab调度器配置  Laravel如何使用Service Container和依赖注入?(代码示例)  南京网站制作费用,南京远驱官方网站?  html如何与html链接_实现多个HTML页面互相链接【互相】  阿里云网站搭建费用解析:服务器价格与建站成本优化指南  Laravel Pest测试框架怎么用_从PHPUnit转向Pest的Laravel测试教程  Laravel怎么多语言本地化设置_Laravel语言包翻译与Locale动态切换【手册】  Laravel事件和监听器如何实现_Laravel Events & Listeners解耦应用的实战教程  Laravel怎么进行数据库事务处理_Laravel DB Facade事务操作确保数据一致性  品牌网站制作公司有哪些,买正品品牌一般去哪个网站买?  Laravel怎么上传文件_Laravel图片上传及存储配置  利用vue写todolist单页应用  如何在万网自助建站中设置域名及备案?  Laravel怎么配置自定义表前缀_Laravel数据库迁移与Eloquent表名映射【步骤】  Laravel如何处理JSON字段的查询和更新_Laravel JSON列操作与查询技巧  php json中文编码为null的解决办法  Laravel如何实现本地化和多语言支持?(i18n教程)  免费的流程图制作网站有哪些,2025年教师初级职称申报网上流程?  利用python获取某年中每个月的第一天和最后一天  jQuery中的100个技巧汇总  Linux系统命令中tree命令详解  西安专业网站制作公司有哪些,陕西省建行官方网站?  无锡营销型网站制作公司,无锡网选车牌流程?  Laravel怎么配置S3云存储驱动_Laravel集成阿里云OSS或AWS S3存储桶【教程】  高配服务器限时抢购:企业级配置与回收服务一站式优惠方案  如何用花生壳三步快速搭建专属网站?  Laravel如何使用Livewire构建动态组件?(入门代码)  实现点击下箭头变上箭头来回切换的两种方法【推荐】  edge浏览器无法安装扩展 edge浏览器插件安装失败【解决方法】  Edge浏览器如何截图和滚动截图_微软Edge网页捕获功能使用教程【技巧】  Laravel怎么使用Markdown渲染文档_Laravel将Markdown内容转HTML页面展示【实战】  Laravel如何实现API资源集合?(Resource Collection教程)  香港服务器建站指南:外贸独立站搭建与跨境电商配置流程  Laravel API资源(Resource)怎么用_格式化Laravel API响应的最佳实践  Zeus浏览器网页版官网入口 宙斯浏览器官网在线通道  VIVO手机上del键无效OnKeyListener不响应的原因及解决方法  怎么用AI帮你为初创公司进行市场定位分析?  百度输入法全感官ai怎么关 百度输入法全感官皮肤关闭  Laravel与Inertia.js怎么结合_使用Laravel和Inertia构建现代单页应用  laravel怎么使用数据库工厂(Factory)生成带有关联模型的数据_laravel Factory生成关联数据方法  html文件怎么打开证书错误_https协议的html打开提示不安全【指南】  如何在橙子建站中快速调整背景颜色?  ,网页ppt怎么弄成自己的ppt?  rsync同步时出现rsync: failed to set times on “xxxx”: Operation not permitted  Laravel如何实现多语言支持_Laravel本地化与国际化(i18n)配置教程  如何用PHP快速搭建高效网站?分步指南  Laravel如何实现登录错误次数限制_Laravel自带LoginThrottles限流配置【方法】  如何快速生成凡客建站的专业级图册?  百度浏览器ai对话怎么关 百度浏览器ai聊天窗口隐藏