版权声明:本文为博主原创文章,未经博主允许不得转载。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. 性能达到原生 MySQL 七倍,华为云 Taurus 技术解读【华为云技术分享】

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

  2. 用Python调用华为云API接口发短信

    [摘要] 用Python调用华为云API接口实现发短信,当然能给调用发短信接口前提条件是通过企业实名认证,而且有一个通过审核的短信签名,话不多说,showcode #!/usr/bin/python3 ...

  3. 基于webpack实现多html页面开发框架四 自动写入多入口,自动插入多个htmlWebpackPlugin插件

    一.解决什么问题      1.手写页面多入口,一个一个输入太麻烦,通过代码实现      2.手写多个htmlWebpackPlugin插件太麻烦,通过代码实现 二.多入口代码实现 //读取所有.j ...

  4. 转:轻松把玩HttpClient之封装HttpClient工具类(一)(现有网上分享中的最强大的工具类)

    搜了一下网络上别人封装的HttpClient,大部分特别简单,有一些看起来比较高级,但是用起来都不怎么好用.调用关系不清楚,结构有点混乱.所以也就萌生了自己封装HttpClient工具类的想法.要做就 ...

  5. Java修炼——ArrayList常用的方法以及三种方式遍历集合元素。

    List接口ArrayList用法详解 ArrayList常用方法: 1. List.add():添加的方法(可以添加字符串,常量,以及对象) List list=new ArrayList(); l ...

  6. JavaScript基础5

    字符串操作方法和属性 length   获取字符串的长度 str.chartAt(指定字符的索引)  获取指定位置的字符 返回string类型的值 str.concat(字符串)   链接多个字符串  ...

  7. JavaScript基础3

    While循环 在指定条件为真时循环执行代码块.先确定条件再执行代码 语法 while(条件) { 需要执行的代码 } 条件中所用变量如果没有值,循环就不会停下,会导致浏览器崩溃: do...whil ...

  8. ACM-ICPC 2018 焦作赛区网络预赛J题 Participate in E-sports

    Jessie and Justin want to participate in e-sports. E-sports contain many games, but they don't know ...

  9. git 设置和取消指定域名代理 - git config proxy

    Firstly - Check Check if U have global .gitconfig file 检查是否有全局 .gitconfig 文件 Usually global .gitconf ...

  10. C# Pkcs8 1024位 加密 解密 签名 解签

    部分代码来至 https://www.cnblogs.com/dj258/p/6049786.html using System; using System.Collections.Generic; ...