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+xhtml+css制作的一个相册效果代码打包下载
Jan 24 Javascript
jQuery的attr与prop使用介绍
Oct 10 Javascript
详解JavaScript基于面向对象之创建对象(2)
Dec 10 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
Mar 08 Javascript
jQuery实现用户输入自动完成功能
Feb 13 Javascript
帝国cms首页列表页实现点赞功能
Oct 30 Javascript
JavaScript复制内容到剪贴板的两种常用方法
Feb 27 Javascript
vue组件挂载到全局方法的示例代码
Aug 02 Javascript
vue组件开发props验证的实现
Feb 12 Javascript
使用apifm-wxapi快速开发小程序过程详解
Aug 05 Javascript
解决vue打包报错Unexpected token: punc的问题
Oct 24 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
Oct 30 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 文件锁与进程锁的使用示例
2017/08/07 PHP
PHP对象的浅复制与深复制的实例详解
2017/10/26 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
javascript mouseover、mouseout停止事件冒泡的解决方案
2009/04/07 Javascript
Prototype Array对象 学习
2009/07/19 Javascript
JavaScript 继承使用分析
2011/05/12 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
2016/02/19 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
2016/06/12 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
2016/10/30 Javascript
原生JS实现左右箭头选择日期实例代码
2017/03/14 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
解决vue里碰到 $refs 的问题的方法
2017/07/13 Javascript
vue resource发送请求的几种方式
2019/09/30 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
Express 配置HTML页面访问的实现
2020/11/01 Javascript
原生js实现九宫格拖拽换位
2021/01/26 Javascript
[07:48]DOTA2上海特级锦标赛主赛事首日RECAP
2016/03/04 DOTA
简单理解Python中基于生成器的状态机
2015/04/13 Python
Python实现的随机森林算法与简单总结
2018/01/30 Python
Python 函数基础知识汇总
2018/03/09 Python
Python迭代器定义与简单用法分析
2018/04/30 Python
《与孩子一起学编程》python自测题
2018/05/27 Python
Python DataFrame设置/更改列表字段/元素类型的方法
2018/06/09 Python
Python Pandas数据结构简单介绍
2019/07/03 Python
HTML5逐步分析实现拖放功能的方法
2020/09/30 HTML / CSS
保安自我鉴定范文
2013/12/08 职场文书
写给女生的道歉信
2014/01/14 职场文书
调解员先进事迹材料
2014/02/07 职场文书
班级课外活动总结
2014/07/09 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书
“爱眼护眼,提前预防近视”倡议书3篇
2019/10/30 职场文书
pandas取dataframe特定行列的实现方法
2021/05/24 Python
分析mysql中一条SQL查询语句是如何执行的
2021/06/21 MySQL
vue选项卡切换的实现案例
2022/04/11 Vue.js