解读javascript的计时器(翻译教程)

2016-02-20 00:57 10 1 收藏

图老师设计创意栏目是一个分享最好最实用的教程的社区,我们拥有最用心的各种教程,今天就给大家分享解读javascript的计时器(翻译教程)的教程,热爱PS的朋友们快点看过来吧!

【 tulaoshi.com - Web开发 】

说明:这篇文章节选自John Resig 的《Secrets of the JavaScript Ninja》一书,本人翻译只是供大家学习,翻译不足之处,请斧正。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

这篇文章主要从下面几个方面解读计时器:

计时器概述; 计时器速度深度探析; 用计时器处理大量任务; 利用计时器管理动画; 较好的计时器测试

计时器是一个我们了解很少且经常被滥用的东西,它是javascript的特色。实际上,在复杂的应用程序开发中,它能为我们提供很多帮助。计时器提供了一个可以将代码片段异步延时执行的能力,javascript生来是单线程的(在一定时间范围内仅一部分js代码能运行),计时器为我们提供了一种避开这种限制的方法,从而开辟了另一条执行代码的蹊径。

有趣的是,与我们普遍接受的观点相反,计时器并不是javascript语言的一部分,而是浏览器引入的方法和对象的一部分。这意味着如果你选择在一个非浏览器的环境运行它,很有可能计时器不存在,你必须使用特定功能推行你自己的版本(如Rhino线程)。

1、计时器是如何工作的

从根本上来说,理解计时器如何工作很重要。通常情况下,计时器的行为并不直观,因为它在一个单独的线程中,让我们从三个函数的测试开始,对于每一个函数我们都有机会构建和控制计时器。

var id = setTimeout(fn,delay);启动一个计时器,它将在延迟时间之后调用特定的函数,该函数返回一个唯一的ID,利用这个ID计时器在稍后的时间里被取消; var id = setInterval(fn,delay);与setTimeout相似,但它不断的调用函数(每隔一定延迟时间)直到它被取消; clearInterval(id),clearTimeout(id);接受计时器的 ID(由上述任意一个函数返回)并停止调用计时器。

为了理解计时器内部是如何工作的,有一个很重要的概念需要加以探讨:延迟是无法保证的。既然浏览器中所有javascript 是在一个单线程中运行的,那么异步事件(如鼠标点击、计时器)在执行中也只有存在开放状态时才运行,下面这张土很好的说明了这个问题:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

这张图有很多信息需要消化,充分理解它将使你对异步js执行有一个更好的认识,图表是一维的,在垂直方向上是时间(挂钟),以毫秒为单位。蓝色盒子代表代表js执行的比例。例如,第一个javascript块运行时间大约为18秒,鼠标点击大约为11秒等等。

来源:http://www.tulaoshi.com/n/20160220/1632904.html

延伸阅读
标签: 电脑入门
课件时常会用到时间限制方面的制作,如进入倒计时,练习倒计时等。我们可以在用WPS演示文稿为平台制作时,利用自定义动画中的出现方式,设置每一个对象的延时为1秒来实现,下面以英语口语比赛计时系统为例详细介绍一下制作过程。 一、输入标题 打开WPS演示文稿,选择空演示文稿,版式选为只有标题,在标题文本框中输入英语口语比赛计时系统字...
标签: Web开发
html: 代码如下: !DOCTYPE html html lang="en" head meta charset="utf-8" !-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess -- meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" titleHTML5 Timer for work-relax balance/title meta na...
标签: 电脑入门
最近学校要举办一次英语口语比赛,其中有一个环节是自由演讲,时间为30秒,由选手自己选定主题。领导决定由我来设计一个计时系统,要求能够实时显示选手剩余时间。我决定选用PowerPoint 2003,利用自定义动画中的出现方式,设置每一个对象的延时为1秒来实现,下面我详细介绍一下制作过程。 输入标题 打开PowerPoint 2003,选择空演示文稿,版...
PS绘制IOS7风格倒数计时器 这篇教程PS鼠绘学习者们使用PS绘制IOS7风格倒数计时器,教程严格来说算是一个ICON制作教程吧,教程难度一般 我们先来看看最终的效果图吧: 图00 具体的绘制步骤如下: 步骤 1 打开Photoshop,新建画布,尺寸730像素×410像素。然后我们通过标志工具,定位画布从的水平和垂直中...
标签: PS PS基础
这次的PS翻译教程中,将和大家一起学习如果使用使用Photoshop创建iOS7风格的简易倒数计时器。对于平面设计来说,吸引网友眼球非常重要。目前,Apple iOS7操作系统带领了新的扁平化设计潮流。如今,iOS7已经正式发布,我们一起来学习这种设计风格吧。 下面先看看iOS7风格的倒数计时器最终效果图吧。 图00 Step 1 打开Photoshop,新建画布...

经验教程

326

收藏

73
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部