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 相关文章推荐
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
Jan 02 Javascript
5秒后跳转到另一个页面的js代码
Oct 12 Javascript
javascript字符串函数汇总
Dec 06 Javascript
BootStrap和jQuery相结合实现可编辑表格
Apr 21 Javascript
基于Vuejs实现购物车功能
Aug 02 Javascript
jQuery图片切换动画特效
Nov 02 Javascript
Bootstarp 基础教程之表单部分实例代码
Feb 03 Javascript
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
Laravel整合Bootstrap 4的完整方案(推荐)
Jan 25 Javascript
微信小程序时间选择插件使用详解
Dec 28 Javascript
JavaScript HTML DOM元素 节点操作汇总
Jul 29 Javascript
解决Vue @submit 提交后不刷新页面问题
Jul 18 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 各种排序算法实现代码
2009/08/20 PHP
PHP生成数组再传给js的方法
2014/08/07 PHP
PHP的switch判断语句的“高级”用法详解
2014/10/01 PHP
php 输入输出流详解及示例代码
2016/08/25 PHP
php 判断字符串编码是utf-8 或gb2312实例
2016/11/01 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
PHP+Ajax简单get验证操作示例
2019/03/02 PHP
关于laravel模板中生成URL的几种模式总结
2019/10/18 PHP
PHP终止脚本运行三种实现方法详解
2020/09/01 PHP
为javascript添加String.Format方法
2020/08/11 Javascript
基于jQuery实现的文字按钮表单特效整理
2014/12/07 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
jQuery复合事件用法示例
2017/06/10 jQuery
vue 2.x 中axios 封装的get 和post方法
2018/02/28 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
2018/06/19 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
2019/04/17 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
JS原型和原型链原理与用法实例详解
2020/02/05 Javascript
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
python动态监控日志内容的示例
2014/02/16 Python
Python编程实现及时获取新邮件的方法示例
2017/08/10 Python
简述Python2与Python3的不同点
2018/01/21 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
获取django框架orm query执行的sql语句实现方法分析
2019/06/20 Python
你还在@微信官方?聊聊Python生成你想要的微信头像
2019/09/25 Python
pytorch三层全连接层实现手写字母识别方式
2020/01/14 Python
浅谈多卡服务器下隐藏部分 GPU 和 TensorFlow 的显存使用设置
2020/06/30 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
详解CSS3浏览器兼容
2016/12/14 HTML / CSS
瑞典Happy Socks美国官网:购买色彩斑斓的快乐袜子
2016/10/19 全球购物
Craghoppers德国官网:户外和旅行服装
2020/02/14 全球购物
进步之星获奖感言
2014/02/22 职场文书
优秀毕业生主要事迹材料
2015/11/04 职场文书
MySQL大小写敏感的注意事项
2021/05/24 MySQL
一文弄懂MySQL索引创建原则
2022/02/28 MySQL