setTimeout和setInterval的使用
(节选自JavaScript精粹)
这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript。不过两者各有各的应用场景。
方 法
实际上,setTimeout和setInterval的语法相同。它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码。
不过这两个函数还是有区别的,setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代码,而setTimeout只执行一次那段代码。
虽然表面上看来setTimeout只能应用在on-off方式的动作上,不过可以通过创建一个函数循环重复调用setTimeout,以实现重复的操作:
File: settimeout_setinterval.js
showTime();
function showTime()
{
var today = new Date();
alert("The time is: " + today.toString());
setTimeout("showTime()", 5000);
}
一旦调用了这个函数,那么就会每隔5秒钟就显示一次时间。如果使用setInterval,则相应的代码如下所示:
File: settimeout_setinterval2.js
setInterval("showTime()", 5000);
function showTime()
{
var today = new Date();
alert("The time is: " + today.toString());
}
这两种方法可能看起来非常像,而且显示的结果也会很 相似,不过两者的最大区别就是,setTimeout方法不会每隔5秒钟就执行一次showTime函数,它是在每次调用setTimeout后过5秒钟 再去执行showTime函数。这意味着如果showTime函数的主体部分需要2秒钟执行完,那么整个函数则要每7秒钟才执行一次。而 setInterval却没有被自己所调用的函数所束缚,它只是简单地每隔一定时间就重复执行一次那个函数。
如果要求在每隔一个固定的时间间隔后就精确地执行某动作,那么最好使用setInterval,而如果不想由于连续调用产生互相干扰的问题,尤其是每次函数的调用需要繁重的计算以及很长的处理时间,那么最好使用setTimeout。
函数指针的使用 |
|
两个计时函数中的第一个参数是一段代码的字符串,其实该参数也可以是一个函数指针,不过Mac下的IE 5对此不支持。 如果用函数指针作为setTimeout和setInterval函数的第二个参数,那么它们就可以去执行一个在别处定义的函数了: setTimeout(showTime, 500); function showTime() { var today = new Date(); alert("The time is: " + today.toString()); } 另外,匿名函数还可以声明为内联函数: setTimeout(function(){var today = new Date(); alert("The time is: " + today.toString());}, 500); |
讨 论
如果对计时函数不加以处理,那么setInterval将会持续执行相同的代码,一直到浏览器窗口关闭,或者用户转到了另外一个页面为止。不过还是有办法可以终止setTimeout和setInterval函数的执行。
当setInterval调用执行完毕时,它将返回一个timer ID,将来便可以利用该值对计时器进行访问,如果将该ID传递给clearInterval,便可以终止那段被调用的过程代码的执行了,具体实现如下:
File: settimeout_setinterval3.js (excerpt)
var intervalProcess = setInterval("alert('GOAL!')", 3000);
var stopGoalLink = document.getElementById("stopGoalLink");
attachEventListener(stopGoalLink, "click", stopGoal, false);
function stopGoal()
{
clearInterval(intervalProcess);
}
只要点击了stopGoalLink,不管是什么时 候点击,intervalProcess都会被取消掉,以后都不会再继续反复执行intervalProcess。如果在超时时间段内就取消 setTimeout,那么这种终止效果也可以在setTimeout身上实现,具体实现如下:
File: settimeout_setinterval4.js (excerpt)
var timeoutProcess = setTimeout("alert('GOAL!')", 3000);
var stopGoalLink = document.getElementById("stopGoalLink");
attachEventListener(stopGoalLink, "click", stopGoal, false);
function stopGoal()
{
clearTimeout(timeoutProcess);
}
转载于:https://www.cnblogs.com/kaka8384/archive/2010/05/19/1739458.html
setTimeout和setInterval的使用相关推荐
- javascript requestAnimationFrame 解决 setTimeout、setInterval 时间不准的方法。
javascript requestAnimationFrame 解决 setTimeout.setInterval 时间不准的方法. 取代 setInterval <!DOCTYPE html ...
- setTimeOut()和setInterval()的用法
setTimeOut()和setInterval()的用法 setTimeOut(function(){},1000); 在特定时间之后调用函数,只调用一次 setInterval(function( ...
- setTimeout和setInterval实现定时器的区别
这两个方法都能够用来实现在一个固定时间段之后去运行JavaScript.只是两者各有各的应用场景. 方 法 实际上,setTimeout和setInterval的语法相同.它们都有两个参数,一个是将要 ...
- js中计时器setTimeout、setInterval、requestAnimationFrame区别
转载自:https://www.cnblogs.com/xiaohuochai/p/5777186.html 本文仅用于作为学习笔记 计时器一直是javascript动画的核心技术.而编写动画循环的关 ...
- JavaScript———从setTimeout与setInterval到AJAX异步
setTimeout与setInterval执行 首先我们看一下以下代码打印结果 1 2 3 4 5 6 7 console.log(1); setTimeout(function() { conso ...
- js的事件循环机制:同步与异步任务(setTimeout,setInterval)宏任务,微任务(Promise,process.nextTick)...
javascript是单线程,一切javascript版的"多线程"都是用单线程模拟出来的,通过事件循环(event loop)实现的异步. javascript事件循环 事件循环 ...
- setTimeout和setInterval你真的了解吗?
setTimeout和setInterval这两个函数, 大家肯定都不陌生, 但可能并不是每个用过这两个方法的同学, 都了解其内部的实质, 甚至可能会错误的把两个实现定时调用的函数理解成了类似thre ...
- js中setTimeout的用法和JS计时器setTimeout与setInterval方法的区别和confirm方法
setTimeout()在js类中的使用方法 setTimeout (表达式,延时时间) setTimeout(表达式,交互时间) 延时时间/交互时间是以豪秒为单位的(1000ms=1s) setTi ...
- setTimeout 和 setInterval
由于 JavaScript 是异步的,可以使用 setTimeout 和 setInterval 来计划执行函数. 注意: 定时处理不是ECMAScript 的标准,它们在DOM (文档对象模型) 被 ...
最新文章
- Python过渡性模块重载(递归重载模块)
- java classifier_Java ZeroR.buildClassifier方法代码示例
- 2020 我的C++学习之路 C++PrimerPlus第六章课后习题
- nginx部署下SSE实现心跳功能
- winform什么时候会调用closed事件_async/await 给程序带来了什么?
- 调查显示:被黑过的公司难以找到投资
- 研究大华3G设备接入自主视频开发平台
- 华为首批升级鸿蒙系统的手机,鸿蒙系统首批升级机型曝光!荣耀手机遗憾缺席,原因很简单...
- java 查找素数_在Java中查找和检查素数
- [转载]sed实现直接修改文件内容
- 中文字符串是怎么比较大小的?
- 模拟与仿真两个词的区别
- 如何用计算机算工资,个人工资计算器避税
- 征途对计算机配置要求,征途2配置要求是什么?
- linux学习shell基础
- 计算机科学给稿费多少,科学网—千字千元的稿费标准高吗? - 籍利平的博文
- 爱奇艺很高兴接受元宇宙及其概念
- Allegro artwork 参数设置
- PNG图像文件格式解析
- IOS开发插件和工具总结
热门文章
- html5 list css,使用HTML5的classList属性操做CSS类
- 两机五节点电力系统的潮流仿真计算_南科大杨再跃课题组在电力系统、机器学习等领域取得重要研究成果...
- csharp OverflowException——超出数值范围会抛出异常
- python berkeley 操作——尤其提示 需版本匹配
- 内存数据库MemSQL ——基于内存,MVCC+哈希表、跳表
- 【9.22校内测试】【可持久化并查集(主席树实现)】【DP】【点双联通分量/割点】...
- 轻松python专题--文本
- 关于git fetch 和git pull 的区别
- C#字符ASCII码学习经验
- Unity3D 游戏引擎之脚本实现模型的平移与旋转(六)