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验证表单大全
Nov 25 Javascript
javascript 屏蔽鼠标键盘的几段代码
Jan 02 Javascript
javascript中"/"运算符常见错误
Oct 13 Javascript
深入理解javascript中的立即执行函数(function(){…})()
Jun 12 Javascript
JS拖拽插件实现步骤
Aug 03 Javascript
两种方法解决javascript url post 特殊字符转义 + & #
Apr 13 Javascript
vue+vux实现移动端文件上传样式
Jul 28 Javascript
完美实现js拖拽效果 return false用法详解
Jul 28 Javascript
详解JavaScript添加给定的标签选项
Sep 17 Javascript
在vue中使用jsx语法的使用方法
Sep 30 Javascript
vue data有值,但是页面{{}} 取不到值的解决
Nov 09 Javascript
vue使用element-ui实现表单验证
Dec 13 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
SONY ICF-SW7600的电路分析
2021/03/02 无线电
paypal即时到账php实现代码
2010/11/28 PHP
php数据库抽象层 PDO
2011/05/07 PHP
PHP类与对象中的private访问控制的疑问
2012/11/01 PHP
培养自己的php编码规范
2015/09/28 PHP
PHP简单处理表单输入的特殊字符的方法
2016/02/03 PHP
关于PHP中协程和阻塞的一些理解与思考
2017/08/11 PHP
php实现简单的权限管理的示例代码
2017/08/25 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
在js中使用"with"语句中跨frame的变量引用问题
2007/03/08 Javascript
jQuery的deferred对象详解
2014/11/12 Javascript
基于jQuery倒计时插件实现团购秒杀效果
2016/05/13 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
完美实现八种js焦点轮播图(上篇)
2016/07/18 Javascript
Vue.js常用指令的使用小结
2017/06/23 Javascript
Angular4学习笔记之实现绑定和分包
2017/08/01 Javascript
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
2018/09/25 Javascript
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
2020/02/04 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
2020/08/28 Javascript
Python导入txt数据到mysql的方法
2015/04/08 Python
Flask入门之上传文件到服务器的方法示例
2018/07/18 Python
对python中的argv和argc使用详解
2018/12/15 Python
深入解析神经网络从原理到实现
2019/07/26 Python
通过 Django Pagination 实现简单分页功能
2019/11/11 Python
Python 面向对象之封装、继承、多态操作实例分析
2019/11/21 Python
浅析python中的del用法
2020/09/02 Python
HTML5自定义mp3播放器源码
2020/01/06 HTML / CSS
ECCO爱步官方旗舰店:丹麦鞋履品牌
2018/01/02 全球购物
Booking.com亚太地区:Booking.com APAC
2020/02/07 全球购物
母亲80寿诞答谢词
2014/01/16 职场文书
城镇居民医疗保险工作总结
2015/08/10 职场文书
springboot如何初始化执行sql语句
2021/06/22 Java/Android
嵌入式Redis服务器在Spring Boot测试中的使用教程
2021/07/21 Redis
浅谈Vue的computed计算属性
2022/03/21 Vue.js