【javascript编程思维】间隔性与延时性定时器的区别 , 如何停止定时器?

简介: 【javascript编程思维】间隔性与延时性定时器的区别 , 如何停止定时器?

🚀 作者 :“大数据小禅”


🚀 粉丝福利 :加入小禅的大数据交流群


🚀 欢迎小伙伴们 点赞👍、收藏⭐、留言💬


间隔性与延时性定时器的区别

间隔型定时器 setInterval(fun,time)


fun为执⾏的函数

time为间隔执⾏的时间,单位为毫秒,每过time时间就执⾏⼀次fun⾥⾯的代码


<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    #tim{
      width: 100px;
      height: 100px;
      background: red;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div id="tim" ></div>
  <script type="text/javascript"> 
    // 间隔性性定时器 setInterval  每间隔三秒会执行一次
    setInterval(function(){
      alert("我是延时3秒执行的弹窗")
             console.log(1)   //控制台每个3秒输出1
    },3000)
  </script>
</body>
</html>

image.png

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    #tim{
      width: 100px;
      height: 100px;
      background: red;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div id="tim" ></div>
  <script type="text/javascript">
    // 延时性定时器 setTimeout  只会执行一次
    setTimeout(function(){
      alert("我是延时3秒执行的弹窗")
    },3000)
  </script>
</body>
</html>

三秒后出现:image.pngimage.png

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    #tim{
      width: 100px;
      height: 100px;
      background: red;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div id="tim" ></div>
  <script type="text/javascript">
    // 清除定时器
    var timer1=setInterval(function(){
      console.log("我是间隔性定时器")
      #time为延时执⾏的时间,单位为毫秒,经过time时间后执⾏fun代码,只执⾏⼀次
    },1000)
    var timer2=setTimeout(function(){
      console.log("我是延时性定时器")
      clearInterval(timer1)
            #执行了两次间隔性之后间隔性输出停止,这里在延时性里面把间隔性清除了,这里延时性输出一次后也不再输出
    },2000)
  </script>
</body>
</html>

image.pngclearTimeout 清除延时性定时器(就是当这个延时性的定时器,在它的延时的时间还没到的时候,我这里执行到了一些代码做了判断,已经执行了这些代码,并且你不想在执行这个定时器的时候)

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    #tim{
      width: 100px;
      height: 100px;
      background: red;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div id="tim" ></div>
  <script type="text/javascript">
    // 清除定时器
    var timer1=setInterval(function(){
      console.log("我是间隔性定时器")
      clearTimeout(timer2)   
      // 本来的输出是一秒输出一次间隔性,2秒一次延时性,这里清除了延时性后下面的延时性不输出,间隔性继续输出
    },1000)
    var timer2=setTimeout(function(){
      console.log("我是延时性定时器")
    },2000)
  </script>
</body>
</html>


相关文章
|
6月前
|
JavaScript 前端开发 Java
JavaScript:编程宇宙的多面闪耀之星-揭秘 JavaScript,编程界的全能霸主如何炼成?-优雅草卓伊凡
JavaScript:编程宇宙的多面闪耀之星-揭秘 JavaScript,编程界的全能霸主如何炼成?-优雅草卓伊凡
135 24
JavaScript:编程宇宙的多面闪耀之星-揭秘 JavaScript,编程界的全能霸主如何炼成?-优雅草卓伊凡
|
7月前
|
JavaScript Ubuntu Linux
如何在阿里云的linux上搭建Node.js编程环境?
本指南介绍如何在阿里云Linux服务器(Ubuntu/CentOS)上搭建Node.js环境,包含两种安装方式:包管理器快速安装和NVM多版本管理。同时覆盖全局npm工具配置、应用部署示例(如Express服务)、PM2持久化运行、阿里云安全组设置及外部访问验证等步骤,助你完成开发与生产环境的搭建。
|
9月前
|
JavaScript 前端开发 容器
this、self、window、top 在 JavaScript 中的区别深入研究
在 JavaScript 开发中,`this`、`self`、`window` 和 `top` 是四个常用的概念。`this` 指向当前执行上下文的对象,其值取决于函数调用方式;`self` 在全局作用域中等同于 `window`,常用于 Web Workers;`window` 代表浏览器窗口,是全局变量的容器;`top` 指向最顶层窗口,用于判断是否在框架中。理解这些概念有助于编写健壮的代码。
241 1
this、self、window、top 在 JavaScript 中的区别深入研究
|
8月前
|
JavaScript 前端开发 IDE
【编程向导】Js与Ts差异详解:选择与权衡
JavaScript 一直是 Web 开发的基石,以其灵活性和动态性著称,但其松散类型可能导致大型项目中出现难以调试的错误。TypeScript 作为 JavaScript 的超集,通过引入静态类型系统,提供了更高的类型安全性和更好的工具支持,尤其适合大型团队和复杂项目。本文详细对比了 JavaScript 和 TypeScript 的优缺点,并提供了实际代码示例,帮助开发者根据项目需求选择合适的工具。
844 2
|
7月前
|
移动开发 运维 供应链
通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)
array.some()可以用来权限检查、表单验证、库存管理、内容审查和数据处理等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
7月前
|
供应链 JavaScript 前端开发
通过array.every()实现数据验证、权限检查和一致性检查;js数组元素检查的方法,every()的使用详解,array.some与array.every的区别(附实际应用代码)
array.every()可以用来数据验证、权限检查、一致性检查等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
11月前
|
前端开发 JavaScript 持续交付
提高JavaScript编程效率
提高JavaScript编程效率
125 3
|
11月前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
169 1
|
11月前
|
设计模式 JavaScript 前端开发
js中new和object.creat区别
【10月更文挑战第29天】`new` 关键字和 `Object.create()` 方法在创建对象的方式、原型链继承、属性初始化以及适用场景等方面都存在差异。在实际开发中,需要根据具体的需求和设计模式来选择合适的方法来创建对象。