JavaScript计时器用法分析【setTimeout和clearTimeout】


Posted in Javascript onJanuary 18, 2017

本文实例分析了JavaScript计时器用法。分享给大家供大家参考,具体如下:

JavaScript中使用setTimeout和clearTimeout函数进行计时/停止计时的操作。

1.指定时间后执行一个动作,如3s后弹出一个对话框:

setTimeout('alert("3s")',5000);

并且,该函数可以叠加起来是用,如:

function delay_times(){
   setTimeout('document.getElementById("time_text").innerHTML = "2s"',2000);
   setTimeout('document.getElementById("time_text").innerHTML = "4s"',4000);
   setTimeout('document.getElementById("time_text").innerHTML = "6s"',6000);
}

2.实现开始计数与停止计数的例子:

var count = 0;
var myTimer;
//开始计数
function start_counter(){
   document.getElementById("time_count").innerHTML = count;
   count++;
   myTimer = setTimeout("start_counter()",1000);
}
//停止计数
function stop_counter(){
   clearTimeout(myTimer);
}
Javascript 相关文章推荐
通过 Dom 方法提高 innerHTML 性能
Mar 26 Javascript
js关闭模态窗口刷新父页面或跳转页面
Dec 13 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
Apr 21 Javascript
js判断iframe内的网页是否滚动到底部触发事件
Mar 18 Javascript
实例说明为什么不要行内使用javascript
Apr 18 Javascript
jQuery同步提交示例代码
Dec 12 Javascript
原生JS查找元素的方法(推荐)
Nov 22 Javascript
在vue中实现简单页面逆传值的方法
Nov 27 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
Jan 09 Javascript
微信小程序项目实践之验证码倒计时功能
Jul 18 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
Nov 27 Javascript
JS变量提升及函数提升实例解析
Sep 03 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 #Javascript
原生Javascript插件开发实践
Jan 18 #Javascript
js实现炫酷的左右轮播图
Jan 18 #Javascript
jQuery实现别踩白块儿网页版小游戏
Jan 18 #Javascript
工厂模式在JS中的实践
Jan 18 #Javascript
基于jQuery制作小图标上下滑动特效
Jan 18 #Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
Jan 18 #Javascript
You might like
PHP使用Session遇到的一个Permission denied Notice解决办法
2014/07/30 PHP
PHP Session机制简介及用法
2014/08/19 PHP
CSS+Jquery实现页面圆角框方法大全
2009/12/24 Javascript
基于jquery的点击链接插入链接内容的代码
2012/07/31 Javascript
调用jQuery滑出效果时闪烁的解决方法
2014/03/27 Javascript
如何编写高质量JS代码(续)
2015/02/25 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
介绍JavaScript中Math.abs()方法的使用
2015/06/14 Javascript
javascript 使用for循环时该注意的问题-附问题总结
2015/08/19 Javascript
jQuery中Find选择器用法示例
2016/09/21 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
2017/01/04 Javascript
javascript 中的try catch应用总结
2017/04/01 Javascript
js禁止浏览器的回退事件
2017/04/20 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
2017/05/26 Javascript
jquery 获取索引值在一定范围的列表方法
2018/01/25 jQuery
Postman模拟发送带token的请求方法
2018/03/31 Javascript
探秘vue-rx 2.0(推荐)
2018/09/21 Javascript
java和js实现的洗牌小程序
2019/09/30 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
2019/11/01 jQuery
Python使用自带的ConfigParser模块读写ini配置文件
2016/06/26 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
Python中super函数用法实例分析
2019/03/18 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
纯css3实现效果超级炫的checkbox复选框和radio单选框
2014/09/01 HTML / CSS
俄罗斯极限运动网上商店:Board Shop №1
2020/12/18 全球购物
学校消防演习方案
2014/02/19 职场文书
群众路线党课主持词
2014/04/01 职场文书
会计人员演讲稿
2014/09/11 职场文书
2014大学生职业生涯规划书最新范文
2014/09/13 职场文书
学校组织向国旗敬礼活动方案(中小学适用)
2014/09/27 职场文书
党的群众路线教育实践活动制度建设计划方案
2014/10/31 职场文书
2016年“11.11”光棍节活动总结
2016/04/05 职场文书
导游词之云南省玉龙雪山
2019/12/19 职场文书
给原生html中添加水印遮罩层的实现示例
2021/04/02 Javascript
vue使用localStorage持久性存储实现评论列表
2022/04/14 Vue.js
详解SQL报错盲注
2022/07/23 SQL Server