JavaScript定时器原理及高级使用
JavaScript里面内置了两个定时器,一个是setTimeout()一个是setInterval()。下面将由浅入深来理解一下定时器的工作原理。
使用方式:
setTimeout()
setTimeout
的语法非常简单,第一个参数为回调函数,第二个参数为延时的时间。函数返回一个数值类型的ID唯一标示符,此ID可以用作 clearTimeout
的参数来取消定时器:
- function out(){
- alert("定时器");
- };
- var timeoutID = window.setTimeout(out,10000);
setInterval()
- var timeoutID = window.setTimeout(out,10000);
- var btn = document.getElementById("mybtn");
- btn.onclick = function () {
- setTimeout(function () {
- document.getElementById("message").nodeName = "mymessage";
- //其它代码
- }, 250);
- }
- <pre code_snippet_id="1831745" snippet_file_name="blog_20160815_3_3109891" name="code" class="html"><!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="Generator" content="EditPlus®">
- <meta name="Author" content="">
- <meta name="Keywords" content="">
- <meta name="Description" content="">
- <title>Document</title>
- </head>
- <body>
- <input type="button" value="开始计时!" onClick="timedCount()">
- <input type="text" id="txt">
- <input type="button" value="停止计时!" onClick="stopCount()">
- </body>
- <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>
- </html></pre><br><br>
关于重复定时器,我们既可以使用setTimeout来重复创建就时器,也可以直接用setInterval,使用setInterval创建的定时器确保了定时器规则地插入队列中,这个方式问题在于代码可能在再次添加到队列之前还没有完成执行,可能寻到定时器重复运行好几次,而中间没有停顿,然而现在的javascript引擎很聪明,能避免这个问题,当使用setInterval时,仅当没有定时器的任何其它代码时,才将定时器代码添加到队列中,这样会确保定时器代码加入到队列的时间的间隔是为指定的间隔,请注意这只是加入队列的时间间隔,并不是执行代码的时间间隔,所以使用setInterval还是会存在两个问题:(1)某些间隔会被跳过了(2)多个定时器的代码执行间隔可能会比预期的要小。
- setTimeout(function () {
- //处理中
- setTimeout(arguments.callee, interval);
- }, interval)
关于定时器的使用技巧
给定时器调用传递参数
- var userName="jack";
- //根据用户名显示欢迎信息
- function hello(_name){
- alert("hello,"+_name);
- }
window.setTimeout(hello(userName),3000);
这将使hello函数立即执行,并将返回值作为调用句柄传递给setTimeout函数,其结果并不是程序需要的。而使用字符串形式可以达到想要的结果:
window.setTimeout("hello(userName)",3000);
这里的字符串是一段JavaScript代码,其中的userName表示的是变量。但这种写法不够直观,而且有些场合必须使用函数名,下面用一个小技巧来实现带参数函数的调用:
- <script language="JavaScript" type="text/javascript">
- <!--
- var userName="jack";
- //根据用户名显示欢迎信息
- function hello(_name){
- alert("hello,"+_name);
- }
- //创建一个函数,用于返回一个无参数函数
- function _hello(_name){
- return function(){
- hello(_name);
- }
- }
- window.setTimeout(_hello(userName),3000);
- //-->
- </script>
取消定时器
- clearInterval(Method);
- var timeout = false; //启动及关闭按钮
- function time()
- {
- if(timeout) return;
- Method();
- setTimeout(time,100); //time是指本身,延时递归调用自己,100为间隔调用时间,单位毫秒
- }
建议:最好不用setInterval,而用setTimeout的延时递归来代替interval。
setInterval会产生回调堆积,特别是时间很短的时候。
JavaScript定时器原理及高级使用相关推荐
- JavaScript定时器原理分析
JavaScript中的定时器大家基本在平时的开发中都遇见过吧,但是又有多少人去深入的理解其中的原理呢?下面我们就来分析一下定时器的实现原理. 一.储备知识 在我们在项目中一般会遇见过这样的两种定时器 ...
- JavaScript定时器的工作原理(翻译)
JavaScript定时器的工作原理(翻译) 标签(空格分隔): JavaScript定时器 最近在看ajax原理的时候,看到了一篇国外的文章,讲解了JavaScript定时器的工作原理,帮助我很好的 ...
- JavaScript 工作原理(二)-如何在 V8 引擎中书写最优代码的 5 条小技巧(译)
From:https://segmentfault.com/a/1190000014770145 原文请查阅这里,略有删减. 本系列持续更新中,Github 地址请查阅这里. 这是 JavaScrip ...
- JavaScript 工作原理之二-如何在 V8 引擎中书写最优代码的 5 条小技巧(译)
原文请查阅这里,略有删减. 本系列持续更新中,Github 地址请查阅这里. 这是 JavaScript 工作原理的第二章. 本章将会深入谷歌 V8 引擎的内部结构.我们也会为如何书写更好的 Java ...
- 深入探索 Qt WebEngineCore:从基础原理到高级应用与技巧
深入探索 Qt WebEngineCore:从基础原理到高级应用与技巧 Diving into Qt WebEngineCore: From Basic Principles to Advanced ...
- JavaScript 工作原理之五-深入理解 WebSockets 和带有 SSE 机制的HTTP/2 以及正确的使用姿势(译)...
原文请查阅这里,略有改动,本文采用知识共享署名 4.0 国际许可协议共享,BY Troland. 本系列持续更新中,Github 地址请查阅这里. 这是 JavaScript 工作原理的第五章. 现在 ...
- JavaScript 工作原理之十一-渲染引擎及性能优化小技巧
原文请查阅这里,略有删减,本文采用知识共享署名 4.0 国际许可协议共享,BY Troland. 本系列持续更新中,Github 地址请查阅这里. 这是 JavaScript 工作原理的第十一章. 迄 ...
- html倒计时timer,JavaScript定时器设置、使用与倒计时案例详解
本文实例讲述了JavaScript定时器设置.使用与倒计时案例.分享给大家供大家参考,具体如下: 1.设置定时器 定时器,适用于定时执行的任务中.在BOM的window对象中,有这样的两个函数是用于设 ...
- 【学习笔记】 Javascript定时器
Javascript定时器 Window对象提供的定时器功能,其基本功能是在规定的时间自定执行某个函数. 根据执行的机制,定时器又分为间歇定时器和延迟定时器. 间歇定时器:每隔一段时间执行指定函数( ...
最新文章
- oracle11g导出表时会发现少表,空表导不出解决方案。
- eclipse怎么设置字体大小非原创
- python gpu加速 显卡_PyTorch-GPU加速实例
- IOS-网络(GCD)
- Visual Studio 2012 和.NET Framework 4.5 快速开始的5分钟视频
- java面试 上传文件_字节跳动面试官,我也实现了大文件上传和断点续传
- dataframe scala 修改值_Spark DataFrame:提取某列并修改/ Column更新、替换
- 搜集访问网页历史记录软件_微软宣布OneDrive版本历史记录功能抵达Win10和macOS客户端版...
- Brew Command Not Found
- java.lang.NoClassDefFoundError: javax/wsdl/extensions/ElementExtensible
- Python--Turtle钟表
- 谭浩翔c语言,严谨细致的科技尖兵丨广州市公安局黄埔区分局民警谭浩翔
- 渲染用计算机功耗,【IT之家评测室】满功耗 RTX 3060 笔记本 GPU 表现如何?拯救者 R9000P 实测...
- FastJson耗时
- 挂载 机械硬盘_如何在mac苹果系统下使用移动硬盘
- 乐视max70老款_这货是电视?超大尺寸乐视TV Max70试玩
- 在ubuntu下烧写映像文件到nand--基于三星210开发板
- 你活着的意义是什么?(灵魂拷问)
- 计算机b级机房建设标准,A类机房建设标准和B类机房建设标准【全国施工】
- 【正点原子MP157连载】第一章 Ubuntu系统安装-摘自【正点原子】【正点原子】STM32MP1嵌入式Linux驱动开发指南V1.7
热门文章
- Kubernetes健康检查如何做?官方推荐教程
- 深入浅出: Java回调机制(异步)
- Linux:nice函数
- Android --- Serializable 接口与 Parcelable 接口的使用方法和区别,怎么选择?
- Android --- 数据库存储的是正确的时间格式(2021-06-17 21:47:23)但是在获取的时候变成了(2021-06-17T13:47:23.000+00:00)
- mysql 隐式锁和显示锁_锁的类型以及粒度,两段锁协议,隐式和显示锁
- 中国液冷数据中心发展白皮书
- 调研机构称明年全球数据中心基础设施支出将增长6%
- POE交换机应用技术知识大全
- 未来的数据中心(三)