Javascript计时器的用法

当我们学习前端的时候定时器是一个重要的知识点,几乎现在的我们打开一个网页中的页面都会看见定时器的身影,京东淘宝的定时秒,轮播图、规定时间的界面跳转…

在JavaScript中给我们提供了两种定时器setTimeout()和setInterval()

一、setTimeout()定时器

语法:window.setTimeout(调用函数,[延迟的毫秒数);

setTimeout()方法:在指定的毫秒数后执行调用函数
注意:
1、因为setTimeout方法是属于window对象的所以我们在调用的时候可以不用写window可以直接写setTimeout(调用函数,[延迟的毫秒数);
2、延迟的时间单位是毫秒,但是可以省略,如果神略则默认的是0,立即执行

  (1)setTimeout(function(){console.log('时间到了');}(2)setTimeout(function(){console.log('时间到了');},0)这两个的定时器的意义是一样的

3、调用的函数可以直接写函数、可以写函数名、还有字符串的写法’函数名()’

(1)直接写函数

  setTimeout(function(){console.log('时间到了');},1000)

(2)写函数名

     首先定义一个函数function alarm(){console.log('时间到了');}setTimeout(alarm,1000);当一秒过后触发alarm函

(3)字符串的写法’函数名()’

     首先定义一个函数function alarm(){console.log('时间到了');}setTimeout('alarm()',1000);当一秒过后触发alarm函数

4、当我们页面存在多个定时器的时候,我们经常要给定时器加标识符,防止定时器在计数的时候出现混乱

   Var time1 = setTimeout(function(){console.log('时间到了');},1000)Var time2 = setTimeout(function(){console.log('时间到了');},1000);

二、setInterval()定时器

语法:window.setInterval(调用函数,[延迟的毫秒数);

setInterval()方法:在指定的毫秒数后执行调用函数
注意:
1、因为setTimeout方法是属于window对象的所以我们在调用的时候可以不用写window可以直接写setInterval(调用函数,[延迟的毫秒数);
2、延迟的时间单位是毫秒,但是可以省略,如果神略则默认的是0,立即执行

  (1)setInterval(function(){console.log('时间到了');}(2)setInterval(function(){console.log('时间到了');},0)这两个的定时器的意义是一样的

3、调用的函数可以直接写函数、可以写函数名、还有字符串的写法’函数名()’

(1)直接写函数

 setInterval(function(){console.log('时间到了');},1000)

(2)写函数名

     首先定义一个函数function alarm(){console.log('时间到了');}setInterval(alarm,1000);每隔一秒过后触发alarm函

(3)字符串的写法’函数名()’

     首先定义一个函数function alarm(){console.log('时间到了');}setInterval('alarm()',1000);每隔一秒过后触发alarm函数

4、当我们页面存在多个定时器的时候,我们经常要给定时器加标识符,防止定时器在计数的时候出现混乱

   Var time1 = setInterval(function(){console.log('时间到了');},1000)Var time2 = setInterval(function(){console.log('时间到了');},1000);

三、两者的区别

1、window.setTimeout()函数 定时时间到了,就去调用这个函数,只调用一次,当函数调用完成后就结束了这个定时器
2、window.setInterval();函数 每隔这个定时的时间,就去掉用这个函数,会多次调用重复调用这个函数

四、清除定时器

有时候我们会让定时器去除这时候我们应该怎么去除掉定时器呢?

(1)清除window.setTimeout()定时器用window.clearTimeout(定时器的标识符)

 Var time1 = setTimeout(function(){console.log('时间到了');},1000)clearTimeout(time1);

(2)清除window.setInterval()定时器用window.clearInterval(定时器的标识符)

 Var time1 = setInterval(function(){console.log('时间到了');},1000)clearInterval(time1);

JavaScript计时器的用法setTimeout()和setInterval()相关推荐

  1. JavaScript计时器函数用法

    文章出自个人博客https://knightyun.github.io/2018/05/24/js-timer-function,转载请申明. Javascript中和大多数语言一样,存在计时函数,使 ...

  2. JavaScript时间事件:setTimeout和setInterval

    Programmers use timing events to delay the execution of certain code, or to repeat code at a specifi ...

  3. javascript之调度:setTimeout 和 setInterval

    目前有两种方式可以实现: setTimeout 允许我们将函数推迟到一段时间间隔之后再执行. setInterval 允许我们重复运行一个函数,从一段时间间隔之后开始运行,之后以该时间间隔连续重复运行 ...

  4. javascript计时器_JavaScript计时器:您需要了解的一切

    javascript计时器 by Samer Buna 通过Samer Buna JavaScript计时器:您需要了解的一切 (JavaScript Timers: Everything you n ...

  5. 说说 JavaScript 计时器的工作原理

    原文:John Resig   http://ejohn.org/blog/how-javascript-timers-work/ How JavaScript Timers Work 从基础的层面来 ...

  6. setTimeout和setInterval你真的了解吗?

    setTimeout和setInterval这两个函数, 大家肯定都不陌生, 但可能并不是每个用过这两个方法的同学, 都了解其内部的实质, 甚至可能会错误的把两个实现定时调用的函数理解成了类似thre ...

  7. setTimeout和setInterval的区别

    setTimeout和setInterval的区别 javascript都是以单线程的方式运行于浏览器的javascript引擎中的, setTimeout和setInterval的作用只是把你要执行 ...

  8. 前端开发:JS中setTimeout和setInterval的对比使用

    前言 在前端开发过程中,关于计时器的使用是非常常用的知识点,也是非常重要的,尤其是需要规定延迟多久之后再去执行某个操作.在JS的计时器使用中有setTimeout和setInterval,二者都是定时 ...

  9. Javascript的setTimeOut()和setInterval()的定时器用法

    Javascript用来处理延时和定时任务的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,比如打开网页一段时间后弹出一个登录框,页面每隔一段时间发送异步请 ...

最新文章

  1. 使用正则表达式进行高效的测试
  2. R语言ggplot2可视化图像设置不同的字体实战
  3. 【数据库】MySQL乱码解决(存入数据乱码和查询输出乱码)
  4. Python学习二——变量和简单数据类型
  5. 5、Power Query-抓取网页数据做漂亮的图表
  6. 如何使用 C# 扩展方法
  7. 浅入深出被人看扁的逻辑回归!
  8. 图论 —— 生成树 —— 最小树形图
  9. JVM优化系列-Stop-The-World实战
  10. Spring中为什么要开启注解扫描
  11. p70_域名解析系统DNS
  12. 星环科技TDH基于Overlay网络架构为数据安全保驾护航
  13. android随机抽奖代码_Android自己定义效果——随机抽奖
  14. Oracle function语法
  15. 肠道重要菌属——嗜胆菌属 (Bilophila)喜欢脂肪、耐胆汁的促炎菌
  16. 【VSCode】设置代码格式化插件Beautify
  17. VUE大屏可视化实战
  18. ESP32产品系列之智能插座(一),框架及硬件设计
  19. android sd卡名称,科普详解Android系统SD卡各类文件夹名称
  20. Mapgis to shp数据转换

热门文章

  1. 类的成员函数this指针
  2. 万能的淘宝再现实力“魔术手”,沙县小吃摇身变成“萌系治愈所”
  3. 李笑来投资iveryone 到底投资了什么?
  4. C++基础编程题(06)求调和平均数(两个数,的倒数平均值的倒数)
  5. 欢聚时代java开发工程师校招面经(已完结)
  6. SpringBoot的starter
  7. 火狐浏览器安装Vue.js devtools 控制台不显示问题
  8. 缺陷可以不予修复的情况
  9. WSAStartup与WSACleanup
  10. ajax jsonp 解析data,jsonp详解