JavaScript中的时间是通过定时器控制的,他们分别是window.setInterval和window.setTimeout,我们当然可以省略window,直接使用方法名称调用。

一  事件分类

  在讲解定时器之前,我们需要先明白 JavaScript 中事件(任务)的分类。

  JavaScript 把所有代码当做事件或任务来执行,由于 JavaScript 是单线程的,所以无论如何它都只能自上而下,一个一个的来执行任务,在做一件事时,不能干其他事,即同步。然而,随着时代的发展,异步的需求越来越多,浏览器(宿主环境)就为我们实现了异步执行任务的 API,本文即将要讲解的定时器就是典型的异步操作。

   ECMAScript 是同步执行的,浏览器又实现了异步API,那么 JavaScript 是怎么保证他们不冲突的呢?事件分类解决了这个问题。

  普通的 JavaScript 语句依然同步执行,但他们执行的地方在 JavaScript 主线程执行栈中,这些任务我们称作同步任务。

  异步API 任务则在单独的线程任务队列中执行,这些任务我们称为异步任务。

  这些任务在执行时保持主线程优先原则,即使异步任务满足不用等待立即执行的条件,也还是要等待同步任务执行完毕。

二  setTimeout

  在等待指定的毫秒数后执行函数,语法如下:

  setTimeout(code/function, milliseconds, param1, param2, ...)

  方法接受2个或多个参数,第一个是一段JS代码或一个函数引用,第二个是需要等待的时间(以毫秒计),如果第一个参数是函数引用,并且需要传递参数,可以在后面依次传入。方法返回一个唯一id,代表该定时器,使用clearTimeout(id)可以清除定时器。

 setTimeout(functon(){
console.log(new Date());
},3000);
console.log(new Date());
//立即显示一次当前时间,3秒后又将显示一次

  经测试发现:如果第一个参数是一段JS代码而非函数引用,该代码将立即被执行,而不会延时等待。

三    setInterval

  等同于 setTimeout(),但持续重复执行该函数。语法如下:

  setInterval(code/function, milliseconds, param1, param2, ...)

  使用方法和setTimeout()相同。

 function timer(){
var d = new Date();
document.body.innerText = d;
}
setInterval(timer,1000);

  上面是一个简单的定时器示例。

  另外,setInterval方法有一个严重的缺陷,那就是不能确保执行时间的准确性。

在执行setInterval()时,假如我们设置每1s执行一次函数,但函数执行一次需要花费2s。浏览器会每隔1s就向一个事件队列中添加一个事件(即执行一次函数),当第一次执行完毕(3s之后了),这时队列中已经有2个事件正在排队了,于是浏览器立即执行第二个事件(等待队列中的第一个)。这样明显和我们本意每1s执行一次函数不符。所以在setInterval中,与其说第二个参数是延时时间,不如说是每个事件执行的最大间隔时间更为准确。因为当事件执行时间大于设置的间隔时间时,两个任务执行之间是没有间隔时间的。

  有些书上表示,到了设置的时间点,如果上一次的函数还没执行完,那么本次事件将不会被添加到事件队列中去,这次事件将被跳过,直到未来设置的某一时间点,前面的任务已经完成,才向队列中添加下一个事件。但浏览器实际上是按照第一种方式管理事件队列的,即到了时间不管前面的是否执行完毕,都插入一个进去,然后依次等待执行。(我用的Chrome  76.0.3869.100测试)

  setInterval主要应用在绘制动画效果上,鉴于它对时间的不准确性,要想获得完美的动画效果请使用CSS3的Animation实现。另外,如果确实需要使用,请务必把握好间隔时间的设置。下面是使用setInterval封装的一个运动函数:

 var timer;
function startMove(obj,json,Fn){
var key;
clearInterval(timer);
timer = setInterval(function(){
for(var prop in json){//json是一个包含需要改变的属性和目标值的对象。
var bridge;
if(prop == 'opacity'){
bridge = getStyle(obj,prop)*100;//为了便于计算,先放大100倍
}else{
bridge = parseInt(getStyle(obj,prop));
}
var speed = (json[prop] - bridge)/6;
speed = speed > 0?Math.ceil(speed):Math.floor(speed);//这里为了获得更好的动画效果,动态设置了运动速度。你当然可以给一个常数作为运动速度
if(prop == 'opacity'){
obj.style[prop] = (bridge + speed) / 100;
}else{
obj.style[prop]= bridge + speed + 'px';
}
if(bridge != json[prop]){
key = false;
}else{
key = true;
}
if(key){
clearInterval(timer);
if(Fn)Fn();//当目标运动完成,执行回调函数
}
}
},30);
} function getStyle(obj,prop){//获取css样式值
if(obj.currentStyle){//IE
return obj.currentStyle(prop);
}else{//其他
return getComputedStyle(obj,false)[prop];
}
}

BOM之定时器的更多相关文章

  1. BOM以及定时器

    一.BOM 1.操作浏览器的一些方法 (浏览器对象模型) 2.window是is中的顶级变量,是一个全局的变量,所有人都可以访问到它,基本 的方法和属性 (document,alert,console ...

  2. 13 -1 BOM和定时器

    一 BOM JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象模型,操作网页上的元 ...

  3. BOM心得-定时器

    写在前面的话:之前一直以为定时器的返回值是Object类型,所以timer初始化也是写null,今天发现返回值是number,进而发觉这个返回值代表的是定时器的索引,指代这是第几个定时器 个人觉得只用 ...

  4. JS中定时器的返回数值ID值

    定时器会返回一个数字值id,可以由clearInterval(id)或clearTimeout(id)来实现对对应定时器的清除. setInterval()/setTimeout()BOM中的Wind ...

  5. web前端面试第一次[定时器]

    BOM中定时器--计时器 定时器参数两个:(函数,时间(单位ms(1000ms=1s))) 时间设置1s,每过1s执行一次函数 //设置定时器 setInterval(funtion(){ alert ...

  6. 前端3 — js — BOM没完( 不了解也行 )

    1.js是什么? -- 英文全称javascript javaScript(简称"JS") 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言.虽然它是作为开发Web页面的脚 ...

  7. Web前端学习路线

    第一阶段: HTML+CSS:HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础:Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAsc ...

  8. 关于web前端的学习路线

    第一阶段: HTML+CSS:HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础:Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAsc ...

  9. (1)写给Web初学者的教案-----学习Web的知识架构

    1:学习Web的知识架构 前文中我们简单的介绍了一些关于Web的基本知识,这里任老师再次强调一下凡是用浏览器打开的网站我们就称之为Web应用程序(B/S结构).除此之外其它需要下载安装的软件或是手机  ...

随机推荐

  1. Keras实例教程(2)

    https://blog.csdn.net/baimafujinji/article/details/78385745

  2. 终于跑通分布式事务框架tcc-transaction的示例项目

    1.背景 前段时间在看项目代码的时候,发现有些接口的流程比较长,在各个服务里面都有通过数据库事务保证数据的一致性,但是在上游的controller层并没有对一致性做保证. 网上查了下,还没找到基于Go ...

  3. 微信小程序室内地图导航开发-微信小程序JS加载esmap地图

    一.在微信小程序里显示室内三维地图 需要满足的两个条件 调用ESMap室内地图需要用到小程序web-view组件,想要通过 web-view 调用ESMap室内地图需要满足以下 2 个条件: 1. 小 ...

  4. ScrollView中页面显示自动滑到最后问题的解决

    转载:https://blog.csdn.net/a644904088/article/details/80241176 原因:ScrollView中包含其余控件,但控件显示不全,此时会存在焦点问题, ...

  5. JavaScript的“true/false && expression”逻辑表达式

    true/false && expression 在学习react的过程中,遇到了如下一个方法: function Mailbox(props) { const unreadMessa ...

  6. IdentityServer3学习记录(搭建IdentityServer项目)

    记录下自己尝试搭建identityServer3的过程,便于自己记录遗忘时翻看,也能便于刚接触的新手简单了解下搭建的过程. 更详细的可以参考 https://www.jianshu.com/p/792 ...

  7. 【基准测试】JMH 简单入门

    JMH 简单入门 什么是 JMH JMH 是 Java Microbenchmark Harness 的缩写.中文意思大致是 "JAVA 微基准测试套件".首先先明白什么是&quo ...

  8. TK可视化之文件内容查找

    1.内容输出类 import tkinter import python基础.day15.搜索数据可视化.BigDataFind class InputViem(): def __init__(sel ...

  9. Badboy - 导出脚本,用于JMeter并发测试

    参考: http://leafwf.blog.51cto.com/872759/1141011 http://www.51testing.com/html/00/130600-1367743.html ...

  10. 牛客多校第二场B discount 基环内向树

    题意: 有n种商品,每种商品有一个价格 p[i] . 每种商品都有2种打折方式: 1. 给你优惠 d[i] 元. 2. 免费送你第 f[i] 种饮料. 现在求每种饮料至少一瓶的最小花费. dp[i][ ...