JS Timing
使用JS是可以让函数不直接执行的，而是在过了一个指定的时间间隔后才执行。这就叫做事件事件。
With JavaScript, it is possible to execute some code NOT immediately after a function is called, but after a specified time interval. This is called timing events.
使用JS是可以让函数不直接执行的，而是在过了一个指定的时间间隔后才执行。这就叫做事件事件。
JavaScript Timing Events
JS时间事件
With JavaScript, it is possible to execute some code NOT immediately after a function is called, but after a specified time interval. This is called timing events.
使用JS是可以让函数不直接执行的，而是在过了一个指定的时间间隔后才执行。这就叫做事件事件。
It's very easy to time events in JavaScript. The two key methods that are used are:
JS的时间事件是非常简单的。使用了两个关键的方法：
* setTimeout() - executes a code some time in the future
在一些时间后执行代码
* clearTimeout() - cancels the setTimeout()
取消setTimeout()
Note: The setTimeout() and clearTimeout() are both methods of the HTML DOM Window object.
注意：setTimeout() 和 Timeout() 都是HTML DOM Window 对象的方法。
setTimeout()
Syntax语法
var t=setTimeout("javascript statement",milliseconds)
The setTimeout() method returns a value - In the statement above, the value is stored in a variable called t. If you want to cancel this setTimeout(), you can refer to it using the variable name.
setTimeout()方法返回一个值 - 在上面的声明里，值被保存在变量t中。如果你想取消这个setTimeout()可以使用变量名来提出它（用clearTimeout(t)）
The first parameter of setTimeout() is a string that contains a JavaScript statement. This statement could be a statement like "alert('5 seconds!')" or a call to a function, like "alertMsg()".
setTomeout()的第一个参数是字符串声明。它可以像"alert('5 seconds!')"或是调用一个函数像"alertMsg()"
The second parameter indicates how many milliseconds from now you want to execute the first parameter.
第二个参数用来表明从现在开始你希望在多少毫秒后执行第一个参数
Note: There are 1000 milliseconds in one second.
1000毫秒为一秒
Example
举例
When the button is clicked in the example below, an alert box will be displayed after 5 seconds.
当下面的按钮被点击后，每过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>
Example - Infinite Loop
无限循环
To get a timer to work in an infinite loop, we must write a function that calls itself. In the example below, when the button is clicked, the input field will start to count (for ever), starting at 0:
要得到一个无限循环的记时器，我们必须写出一个自我调用的函数。下面的例子，当按钮按下后，输入框就会从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()
Syntax语法
clearTimeout(setTimeout_variable)
Example
举例
The example below is the same as the "Infinite Loop" example above. The only difference is that we have now added a "Stop Count!" button that stops the timer:
下面的例子和上面的“无限循环”差不多。唯一的不同就是我们现在多了一个“停止记数”的按钮来停止记时器。
<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
使用JS是可以让函数不直接执行的,而是在过了一个指定的时间间隔后才执行.这就叫做事件事件. With JavaScript, it is possible to execute some code NOT immediately after a function is called, but after a specified time interval. This is called timing events. 使用JS是可以让函数不直接执行的,而是在过了一个指定的时间间隔后才执行.这就叫做
-
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
本文实例讲述了JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果.分享给大家供大家参考,具体如下: <%@ page language="java" import="java.util.*" pageEncoding="GB2312"%> <% String path = request.getContextPath(); String basePath = request.getScheme() +
-
SVG动画vivus.js库使用小结(实例代码)
SVG动画vivus.js库使用整理,具体实例代码如下所示: 使用方法如图: HTML例子代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta
-
总结几道关于Node.js的面试问题
什么是error-first的回调方式 Error-first回调方式用来同时传递error和data.将错误作为第一个参数,它就必须先检查看看有没有错误先.另外的参数就用来传递data了. fs.readFile(filePath, function(err, data) { if(err) { //处理错误,这里的return很重要,如果发生错误,在此处就会停止了. return console.log(err); } //传递data console.log(data); }) 你是如何避
-
JS组件福利大放送 推荐12款好用的Bootstrap组件
前言:之前分享过很多bootstrap常用组件,包括表格.表单验证.文件上传.复选下拉框.弹出框等.这段时间,博主又收藏了一些好用的组件(有些在项目中已经用起来了),经过两天的时间,已经整理出了一部分,本着"好东西要与人分享"的原则,今天还是来点福利,将博主收藏的东西分享出来,供需要的园友参考.组件大部分都是些开源组件,也有部分是博主自己在网上找到然后改写出来的效果,可能不尽如人意,有兴趣的且看看吧. 一.时间组件 bootstrap风格的时间组件非常多,你可以在github上面随便搜
-
使用JS判断页面是首次被加载还是刷新
1 利用window.name属性在页面刷新时不会重置判断(在该属性空置的情况下可使用) if(window.name == ""){ console.log("首次被加载"); window.name = "isReload"; // 在首次进入页面时我们可以给window.name设置一个固定值 }else if(window.name == "isReload"){ console.log("页面被刷新&quo
-
一些可能会用到的Node.js面试题
前言 从ECMAScript标准,Node.js语法以及NPM模块角度来看,Node.js的发展让人目不暇接,那么面试题也得与时俱进. 问题 什么是错误优先的回调函数? 如何避免回调地狱? 什么是Promise? 用什么工具保证一致的代码风格?为什么要这样? 什么是Stub?举例说明 什么是测试金字塔?举例说明 最喜欢哪个HTTP框架?为什么? Cookies如何防范XSS攻击? 如何保证依赖的安全性? 答案 1. 什么是错误优先的回调函数? 错误优先的回调函数(Error-First Call
-
JS开发常用工具函数(小结)
1.isStatic:检测数据是不是除了symbol外的原始数据 function isStatic(value) { return( typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean' || typeof value === 'undefined' || value === null ) } 2.isPrimitive:检测数据是不是原始数据 function isPrimit
-
js实现简易计数器功能
本文实例为大家分享了js实现简易计数器功能的具体代码,供大家参考,具体内容如下 实现简易计数器 可进行三个操作,开始计数,暂停计数,复位操作 (使用计时函数事件) <html> <head> <meta charset="utf-8"> <title>简易计数练习</title> <style type="text/css">
-
Angular.js中ng-include用法及多标签页面的实现方式详解
前言 大家在平时的项目开发中,应该会经常遇到上图所示的需求,就是在一个页面中有多个标签,被选中的标签颜色会高亮显示,切换不同标签显示相应的不同内容.如果内容代码过多则写在同一个html文件就会显得特别乱,所以这里我们最好把页面代码分开单独管理,controller也可以分开来管理,这样就会显得清楚的多. 这里就要使用到Angularjs中个ng-include指令.下面来看看详细的介绍: 一.多标签的编写 首先需要了解需求: 1.同时只能选中一个标签 2.被选中的标签背景色以及自体颜色都将改变.