版权声明:本文为博主原创文章,未经博主允许不得转载。https://www.cnblogs.com/gaoguowen/p/11119088.html

什么是定时器

  • 简单来说就是在一段时间间隔后执行一个函数或执行一段代码的方法
  • JavaScript 原生提供几种定时器 setIntervalsetTimeoutrequestAnimationFrame
  • 执行函数中的作用域未全局作用域this指向全局,可通过 bind 方法给执行函数传递参数或指定作用域 (严格模式下,setTimeout( callback,delay)中callback里面的this仍然默认指向window对象, 并不是undefined)
  • 回调函数会放到 marco task 中等道主线程空闲时才会去执行,因此间隔时间会稍长;调用marco task中的顺序,先进先出原则

setInterval

  • 每相隔一段时间间隔执行一个函数或执行一段代码的方法
  • 通过clearInterval方法来取消定时器
      let timerInterID =  window.setInterval(callback,delay[,param...])
setTimeout( clearInterval.bind(null,timerInterID),1000)

参数

  • callback 重复执行的函数或代码段(不推荐使用一段字符串构成的代码,应为这样做不安全,会被不法分子利用)
  • delay 时间间隔,单位为毫秒(ms)实际间隔可能会稍长(最小间隔是4ms)
  • timerInterID 每次调用setInterval方法返回的唯一 ID,可通过调用 clearInterval方法来清除setInterval方法
  • param1, ..., paramN 传递给执行函数(callback)的参数 (IE9 及更早的 IE 浏览器不支持向回调函数传递额外参数。如果你想要在IE中达到同样的功能,你必须使用一种兼容代码 )

setTimeout

  • 在一段时间间隔后执行一个函数或执行一段代码的方法
  • 通过clearTimeout方法来清除定时器
let timerTimeID = setTimeout(callback,delay[,param1, ..., paramN ])

参数

  • callback 重复执行的函数或代码段(不推荐使用一段字符串构成的代码,应为这样做不安全,会被不法分子利用)
  • delay 时间间隔,单位为毫秒(ms),默认为0实际间隔可能会稍长(最小间隔为 4ms )
  • timerTimeID 每次调用setTimeout方法返回的唯一 ID,可通过调用 clearTimeout方法来清除setTimeout方法
  • param1, ..., paramN 传递给执行函数(callback)的参数 (IE9 及更早的 IE 浏览器不支持向回调函数传递额外参数。如果你想要在IE中达到同样的功能,你必须使用一种兼容代码 )

requestAnimationFrame

  • 类似于setTimeout方法,执行动画时推荐使用
  • 会在浏览器下次重绘前执行函数
  • 采用系统时间间隔,保持最佳绘制效率,不会因为间隔时间过短,造成过度绘制,增加开销
  • 当运行在后台标签页或隐藏在 iframe时,会暂停调用
let frameID = window.requestAnimationFrame(callback)
setTimeout(cancelAnimationFrame.bind(null,FrameID),1000)

参数

  • callback 更新动画帧所调用的函数
  • 一帧大约 16.7ms

兼容性

JavaScript定时器(Timer)的更多相关文章

  1. javascript 定时器 timer setTimeout setInterval (js for循环如何等待几秒再循环)

    实现一个打点计时器,要求1.从 start 到 end(包含 start 和 end),每隔 100 毫秒 console.log 一个数字,每次数字增幅为 12.返回的对象中需要包含一个 cance ...

  2. [ Javascript ] JavaScript中的定时器(Timer) 是怎样工作的!

    作为入门者来说.了解JavaScript中timer的工作方式是非常重要的.通常它们的表现行为并非那么地直观,而这是由于它们都处在一个单一线程中.让我们先来看一看三个用来创建以及操作timer的函数. ...

  3. Javascript定时器(二)——setTimeout与setInterval

    一.解释说明 1.概述 setTimeout:在指定的延迟时间之后调用一个函数或者执行一个代码片段 setInterval:周期性地调用一个函数(function)或者执行一段代码. 2.语法 set ...

  4. JavaScript定时器的工作原理(翻译)

    JavaScript定时器的工作原理(翻译) 标签(空格分隔): JavaScript定时器 最近在看ajax原理的时候,看到了一篇国外的文章,讲解了JavaScript定时器的工作原理,帮助我很好的 ...

  5. JavaScript定时器越走越快的问题

    目录 JavaScript定时器越走越快的问题 (setinterval)多次初始化 清除(clearInterval)的失效 解决方法 JavaScript定时器越走越快的问题 之前在项目中写了定时 ...

  6. JavaScript定时器及回调用法

    JavaScript定时器及回调用法 循环定时任务 // 假设现在有这样一个需求:我需要请求一个接口,根据返回结果判断需不需要重复请求,直到达到某一条件为止,停止请求执行某操作 <script ...

  7. python中实现定时器Timer

    实现定时器最简单的办法是就是循环中间嵌time.sleep(seconds), 这里我就不赘述了 # encoding: UTF-8 import threading #Timer(定时器)是Thre ...

  8. Javascript定时器(三)——setTimeout(func, 0)

    setTimeout(func, 0)可以使用在很多地方,拆分循环.模拟事件捕获.页面渲染等 一.setTimeout中的delay参数为0,并不是指马上执行 <script type=&quo ...

  9. 订餐系统之定时器Timer不定时

    经过几天漫长的问题分析.处理.测试.验证,定时器Timer终于定时了,于是开始了这篇文章,希望对还在纠结于“定时器Timer不定时”的同学有所帮助,现在的方案,在系统日志中会有警告,如果您有更好的方案 ...

随机推荐

  1. 【我的物联网成长记6】由浅入深了解NB-IoT【华为云技术分享】

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...

  2. 关于CSS选择器连续性的问题

    在html中有以下结构: --- ----- <div class="row100"> <div class="col"> <di ...

  3. Golang中的布隆过滤器

    目录 1. 布隆过滤器的概念 2. 布隆过滤器应用场景 3. 布隆过滤器工作原理 4. 布隆过滤器的优缺点 5. 布隆过滤器注意事项 6. Go实现布隆过滤器 1. 布隆过滤器的概念 布隆过滤器(Bl ...

  4. HotStuff共识协议详解

    1. 前言 HotStuff提出了一个三阶段投票的BFT类共识协议,该协议实现了safety.liveness.responsiveness特性.通过在投票过程中引入门限签名实现了O(n)的消息验证复 ...

  5. iOS强制横竖屏转换

    https://www.jianshu.com/p/d6cb54d2eaa1  这篇文章给出的方案是可行的. 经测试,想要第一个界面强制横屏,第二个界面强制竖屏, dismiss掉之后回到第一个界面依 ...

  6. 初始CSS3 实例

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  7. [TimLinux] django html如何实现固定表头

    1. 需求 表格很长,这个时候就希望表格头部不动,而只是表格内容行支持滚动功能. 2. 方法 两张表:一张表(THeader)负责头部字段的显示,另一张表(TBody)负责内容行字段的显示. 两张表都 ...

  8. Ubuntu18.04安装openCV4.1.2

    Ubuntu18.04下安装openCV4.1.2 注意: 在整个安装过程中,包括后期QT的使用中不要出现中文路径.会很坑的. 一.下载openCV4.1.2 可以再官网进行下载https://ope ...

  9. 纯手工搭建K8s(单节点)

    准备说明: 因为为纯手动搭建,所以针对安装时需要的一些安装包需提前下载好 cfssl_linux-amd64. cfssljson_linux-amd64. cfssl-certinfo_linux- ...

  10. 简述c和c++的基本区别,你真的懂吗?(面试必学)

    前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:angry_youth   **1.c和c++的头文件不同:** c的头 ...