JS Timing

通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

JavaScript 计时事件

通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:

setTimeout()

未来的某时执行代码

clearTimeout()

取消setTimeout()

setTimeout()

语法

var t=setTimeout("javascript语句",毫秒)

setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。

setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。

第二个参数指示从当前起多少毫秒后执行第一个参数。

当下面这个例子中的按钮被点击时，一个提示框会在5秒中后弹出

<html>

<head>

<script type="text/javascript">

function timedMsg()

 {

 var t=setTimeout("alert('5 seconds!')",5000)

 }

</script>

</head>

<body>

<form>

<input type="button" value="Display timed alertbox!" onClick="timedMsg()">

</form>

</body>

</html>

无穷循环

要创建一个运行于无穷循环中的计时器，我们需要编写一个函数来调用其自身。在下面的例子中，当按钮被点击后，输入域便从 0 开始计数。

<html>

<head>

<script type="text/javascript">

var c=0

var t

function timedCount()

 {

 document.getElementById('txt').value=c

 c=c+1

 t=setTimeout("timedCount()",1000)

 }

</script>

</head>

<body>

<form>

<input type="button" value="Start count!" onClick="timedCount()">

<input type="text" id="txt">

</form>

</body>

</html>

clearTimeout()

语法

clearTimeout(setTimeout_variable)

下面的例子和上面的无穷循环的例子相似。唯一的不同是，现在我们添加了一个 "Stop Count!" 按钮来停止这个计数器：

<html>

<head>

<script type="text/javascript">

var c=0

var t

function timedCount()

 {

 document.getElementById('txt').value=c

 c=c+1

 t=setTimeout("timedCount()",1000)

 }

function stopCount()

 {

 clearTimeout(t)

 }

</script>

</head>

<body>

<form>

<input type="button" value="Start count!" onClick="timedCount()">

<input type="text" id="txt">

<input type="button" value="Stop count!" onClick="stopCount()">

</form>

</body>

</html>

JS Timing的更多相关文章

  1. JavaScript学习05 定时器

    JavaScript学习05 定时器 定时器1 用以指定在一段特定的时间后执行某段程序. setTimeout(): 格式:[定时器对象名=] setTimeout(“<表达式>”,毫秒) ...

  2. JavaScript 教程学习进度备忘(二)

    备忘:之前,只将“JS 教程”学习完毕,这篇记录:“JS HTML DOM ”.“JS 对象”.“JS Window”.“JS 库” 书签:跳过:另外跳过的内容有待跟进 _______________ ...

  3. 使用Firebug或chrome-devToolBar深入学习javascript语言核心

    使用Firebug和chrome-devToolBar调试页面样式或脚本是前端开发每天必做之事.这个开发神器到底能给我们带来哪些更神奇的帮助呢?这几天看的一些资料中给了我启发,能不通过Firebug和 ...

  4. JavaScript | window浏览器对象模型

    Js Window - 获取浏览器窗口 全局变量是window对象的属性 全局函数是window对象的方法 HTML DOM的document是window对象属性之一 window.document ...

  5. [译]Node.js Interview Questions and Answers (2017 Edition)

    原文 Node.js Interview Questions for 2017 什么是error-first callback? 如何避免无止境的callback? 什么是Promises? 用什么工 ...

  6. js/jquery/html前端开发常用到代码片段

    1.IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条件注释只能用于IE5以上,IE ...

  7. CSS 和 JS 动画哪个更快

    基于Javascript的动画暗中同CSS过渡效果一样,甚至更加快,这怎么可能呢?而Adobe和Google持续发布的富媒体移动网站的性能可媲美本地应用,这又怎么可能呢? 本文逐一遍览了基于Javas ...

  8. 移动Web与js定时器暂停或不准确计时的问题解决

    PC 上的 Firefox.Chrome 和 Safari 等浏览器,都会自动把未激活页面中的 JavaScript 定时器(setTimeout.setInterval)间隔最小值改为 1 秒以上: ...

  9. [JS] JavaScript由浅入深(1) 基本特性

    1.全局变量的特性: 在函数体内直接写的变量(未用var标志)自动升级为全局变量. (function func() { i = 100; }()); alert(i); 非常不建议不写var. va ...

随机推荐

  1. 关于简单的Excel多页签底层导出_电子底账导出为例（.net core）

    [HttpPost] public ActionResult ExpEleAcc(string linknos) { string filenname = null; CommonResult< ...

  2. native-base中Input,Textarea等组件在ios平台下不能输入中文

    在上文react-native中TextInput在ios平台下不能输入中文已经解决. 但是在native-base中Input和Textarea都存在这样的问题.为了不要写多个组件,封装以下代码: ...

  3. uni-app微信小程序开发之引入腾讯视频小程序播放插件

    登录微信小程序管理后台添加腾讯视频播放插件: 正式开始使用腾讯视频小程序插件之前需先在微信公众平台 -> 第三方设置 -> 插件管理处添加插件,如下图所示: 在uni-app中引入插件代码 ...

  4. 记录我的 python 学习历程-Day06 is id == / 代码块 / 集合 / 深浅拷贝

    一.is == id 用法 在Python中,id是内存地址, 你只要创建一个数据(对象)那么就会在内存中开辟一个空间,将这个数据临时加载到内存中,这个空间有一个唯一标识,就好比是身份证号,标识这个空 ...

  5. ASP.NET Core 选项模式源码学习Options IOptionsMonitor（三）

    前言 IOptionsMonitor 是一种单一示例服务,可随时检索当前选项值,这在单一实例依赖项中尤其有用.IOptionsMonitor用于检索选项并管理TOption实例的选项通知, IOpti ...

  6. 【Hybird】274-Hybird App 应用开发中 5 个必备知识点复习

    前言 我们大前端团队内部 ?每周一练 的知识复习计划还在继续,本周主题是 <Hybird APP 混合应用专题> ,这期内容比较多,篇幅也相对较长,每个知识点内容也比较多. 之前分享的每周 ...

  7. Orleans[NET Core 3.1] 学习笔记（三）（ 2 ）客户端配置

    客户端配置 通过一个ClientBuilder和多个补充选项类,以编程方式配置一个用于连接Silo集群并将请求发送至Grain的客户端. 客户端配置示例: var client = new Clien ...

  8. dapr微服务.netcore sdk入门

    Actors入门 先决条件 .Net Core SDK 3.0 Dapr CLI Dapr DotNet SDK 概述 本文档描述如何在客户端应用程序上创建Actor(MyActor)并调用其方法. ...

  9. Label自适应高度的用法及设置倒角

    UILabel *label = [[UILabel alloc] init]; //根据内容动态计算label的高度 label.text = @"Sent when the applic ...

  10. WFS服务查询方法

    基于Geoserver发布的wfs服务,实现空间和属性信息的查询.wfs包含getFeature操作,用来检索要素信息,支持返回gml格式的地理要素表达. WFS的getFeature操作需要提供的参 ...