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 相关文章推荐
表单项的name命名为submit、reset引起的问题
Dec 22 Javascript
ajaxControlToolkit AutoCompleteExtender的用法
Oct 30 Javascript
JQuery中extend的用法实例分析
Feb 08 Javascript
JS实现选择TextArea内文本的方法
Aug 03 Javascript
AngularJS directive返回对象属性详解
Mar 28 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
Jul 19 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
Jan 03 Javascript
JS实现的自动打字效果示例
Mar 10 Javascript
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
微信小程序实现传递多个参数与事件处理
Aug 12 Javascript
JS简易计算器实例讲解
Jun 30 Javascript
vue element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
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 数据结构 算法 三元组 Triplet
2011/07/02 PHP
PHP生成短网址的3种方法代码实例
2014/07/08 PHP
curl和libcurl的区别简介
2015/07/01 PHP
php实现替换手机号中间数字为*号及隐藏IP最后几位的方法
2016/11/16 PHP
JQuery 自定义CircleAnimation,Animate方法学习笔记
2011/07/10 Javascript
javascript测试题练习代码
2012/10/10 Javascript
Javascript中Array.prototype.map()详解
2014/10/22 Javascript
node.js中的url.parse方法使用说明
2014/12/10 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
javascript动画算法实例分析
2015/07/31 Javascript
node.js实现爬虫教程
2020/08/25 Javascript
基于Vuejs实现购物车功能
2016/08/02 Javascript
微信小程序 绘图之饼图实现
2016/10/24 Javascript
Vuex和前端缓存的整合策略详解
2017/05/09 Javascript
three.js中文文档学习之创建场景
2017/11/20 Javascript
JS实现常见的查找、排序、去重算法示例
2018/05/21 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
vue基于viewer实现的图片查看器功能
2019/04/12 Javascript
jQuery中使用validate插件校验表单功能
2019/05/24 jQuery
vue input输入框关键字筛选检索列表数据展示
2020/10/26 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
2019/12/04 Javascript
js实现时间日期校验
2020/05/26 Javascript
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
[01:22:19]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
Pycharm技巧之代码跳转该如何回退
2017/07/16 Python
python logging日志模块原理及操作解析
2019/10/12 Python
python获取依赖包和安装依赖包教程
2020/02/13 Python
更新升级python和pip版本后不生效的问题解决
2020/04/17 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
win10从零安装配置pytorch全过程图文详解
2020/05/08 Python
Python图像读写方法对比
2020/11/16 Python
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
英国当代时尚和街头服饰店:18montrose
2018/12/15 全球购物
元旦晚会活动总结
2014/07/09 职场文书
信息合作协议书
2014/10/09 职场文书