JavaScript 计时事件-setInterval()-clearInterval() -setTimeout()-clearTimeout()
(PS:JavaScript 一个设定的时间间隔之后来执行代码,我们称之为计时事件。)
JavaScript 计时事件
通过使用 JavaScript,我们有能力做到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。
在 JavaScritp 中使用计时事件是很容易的,两个关键方法是:
- setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
- setTimeout() - 暂停指定的毫秒数后执行指定的代码
Note: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。
setInterval() 方法
setInterval() 间隔指定的毫秒数不停地执行指定的代码
语法
window.setInterval() 方法可以不使用window前缀,直接使用函数setInterval()。
setInterval() 第一个参数是函数(function)。
第二个参数间隔的毫秒数
注意: 1000 毫秒是一秒。
实例
每三秒弹出 "hello" :
实例展示了如何使用 setInterval() 方法,但是每三秒弹出一次对用户体验并不好。
以下实例将显示当前时间。 setInterval() 方法设置每秒钟执行一次代码,就是手表一样。
实例
显示当前时间
function
myTimer()
{
var d=new Date();
var
t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
如何停止执行?
clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。
语法
window.clearInterval() 方法可以不使用window前缀,直接使用函数clearInterval()。
要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量:
然后你可以使用clearInterval() 方法来停止执行。
实例
以下例子,我们添加了 "Stop time" 按钮:
<button onclick="myStopFunction()">Stop
time</button>
<script>
var
myVar=setInterval(function(){myTimer()},1000);
function myTimer()
{
var
d=new Date();
var
t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
function
myStopFunction()
{
clearInterval(myVar);
}
</script>
setTimeout() 方法
语法
setTimeout() 方法会返回某个值。在上面的语句中,值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout(),你可以使用这个变量名来指定它。
setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')",或者对函数的调用,诸如 alertMsg()"。
第二个参数指示从当前起多少毫秒后执行第一个参数。
提示:1000 毫秒等于一秒。
实例
等待3秒,然后弹出 "Hello":
如何停止执行?
clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。
语法
window.clearTimeout() 方法可以不使用window 前缀。
要使用clearTimeout() 方法, 你必须在创建超时方法中(setTimeout)使用全局变量:
如果函数还未被执行,你可以使用 clearTimeout() 方法来停止执行函数代码。
实例
以下是同一个实例, 但是添加了 "Stop the alert" 按钮:
function
myFunction()
{
myVar=setTimeout(function(){alert("Hello")},3000);
}
function
myStopFunction()
{
clearTimeout(myVar);
}
JavaScript 计时事件-setInterval()-clearInterval() -setTimeout()-clearTimeout()的更多相关文章
- JavaScript 计时事件
JavaScript 计时事件 通过使用 JavaScript,我们有能力作到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行.我们称之为计时事件. 在 JavaScritp 中使用计 ...
- 16 JavaScript计时事件&显示时钟
计时事件:JavaScript设定一定的时间间隔之后来执行代码 window.setInterval("JavaScript function",millisecons):间隔指定 ...
- javaScript 笔记(4) -- 弹窗 & 计时事件 & cookie
弹窗 可以在 JavaScript 中创建三种消息框:警告框.确认框.提示框. 警告框:经常用于确保用户可以得到某些信息. 当警告框出现后,用户需要点击确定按钮才能继续进行操作. 语法: window ...
- js中setInterval与setTimeout用法
setTimeout 定义和用法: setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式. 语法: setTimeout(code,millisec) 参数: ...
- js中setInterval与setTimeout用法 实现实时刷新每秒刷新
setTimeout 定义和用法: setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式. 语法: setTimeout(code,millisec) 参数: ...
- js计时事件
通过在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行,我们称之为计时事件. 1. setTimeout()--暂停指定的时间后执行指定的代码 clearTimeout ()--停止se ...
- JavaScript 计时
http://www.w3school.com.cn/js/js_timing.asp JavaScript 计时事件 通过使用 JavaScript,我们有能力作到在一个设定的时间间隔之后来执行代码 ...
- JavaScript计时
JavaScript计时分两种 setTimeout:程序在隔几秒后执行 语法: setTimeout(function(){要执行的程序},xxxx) setInterval:程序每隔几秒执行 语法 ...
- JavaScript之关闭轮询定时器(setTimeout/clearTimeout|setInterval/clearInterval)小结
已知: 1.1 开启Timeout程序: scope.setTimeout("functionName()" | functionHandle, timeValue) 返回值:ti ...
随机推荐
- iOS开发ReactiveCocoa学习笔记(五)
ReactiveCocoa常见操作方法介绍: demo地址:https://github.com/SummerHH/ReactiveCocoa.git filter ignore ignoreValu ...
- 《大话设计模式》num01---简单工厂模式
2017年12月10日 20:13:57 独行侠的守望 阅读数:128更多个人分类: 设计模式编辑版权声明:本文为博主原创文章,转载请注明文章链接. https://blog.csdn.net/xia ...
- linux cached过高导致性能变低
场景: 拿到了客户50个文件,平均每个文件大概40M左右的txt,文件在S3上,需要导入到数据库,40M解析出来大概是80W条左右的数据. 描述: 在刚开始执行导入时,因为数据验证复杂程度不同,每个文 ...
- 【php】
1 <?php $arr = [ 'a' => 'aaa', ]; $arr2 = $arr; $arr2['a'] = 'ccc'; print_r($arr); print_r($ar ...
- EasyUI Combobox 的 onChange,onSelect,onClick 事件
EasyUI 中 Combobox 选项发生改变时会触发 onChange,onSelect,onClick,3 个事件.最近要做一个级联的 Combo 菜单,类似于选择地址时让用户填写省,市,区的菜 ...
- LeetCode 4Sum 4个数之和
题意:这是继2sum和3sum之后的4sum,同理,也是找到所有4个元素序列,满足他们之和为target.以vector<vector<int>>来返回,也就是二维的,列长为4 ...
- IOS 模仿有storyboard的项目控制器的创建
● 先加载storyboard文件(Test是storyboard的文件名) UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@ ...
- opencv使用 findContours
http://www.jb51.net/article/132217.htm https://www.jianshu.com/p/4bc3349b4611 https://blog.csdn.net/ ...
- python_8_guess
#python3和2都可以 #方法1 age_of_oldboy=56 count=0 while True: if count==3: break guess_age=int(input('gues ...
- CUDA:Supercomputing for the Masses (用于大量数据的超级计算)-第七节
第七节:使用下一代CUDA硬件,快乐加速度 原文链接 Rob Farber 是西北太平洋国家实验室(Pacific Northwest National Laboratory)的高级科研人员.他在多个 ...