setTimeout setInterval 计时器
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
返回值:返回一个 ID(数字),可以将这个ID传递给 clearTimeout() 来取消执行。

案例: 点击按钮开始,停止时间显示
<div onclick="startStop()" style="width:100px;height: 20px; line-height: 20px; background:red;text-align: center; color:#fff">button</div>
let timer=null
function showtime(){
let date=new Date()
let year=date.getFullYear()
let month=date.getMonth()+1
let day=date.getDate()
let hour=date.getHours()
let Minutes=date.getMinutes()
let seconds=date.getSeconds()
let dataTime=`${year}-${month}-${day} ${hour}:${Minutes>=10 ? Minutes : '0'+Minutes}:${seconds>=10 ? seconds :'0'+seconds }`
console.log(dataTime) // 2019-4-29 16:02:50
timer=window.setTimeout(showtime,10000)
}
function startStop(){
console.log('timer',timer)
if(timer){
clearTimeout(timer)
timer=null
console.log('1')
}else{
console.log('2')
showtime()
}
}
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

案例: 显示当前时间
<p>显示当前时间:</p>
<p id="demo"></p>
<button onclick="myStopFunction()">停止时间</button>
var myVar = setInterval(function(){ myTimer() }, 1000);
function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = t;
}
function myStopFunction() {
clearInterval(myVar);
}
参考资料
https://www.runoob.com/jsref/met-win-setinterval.html
setTimeout setInterval 计时器的更多相关文章
- js异步处理工作机制(setTimeout, setInterval)
经常谈到异步,但是发现自己一直没深入理解setTimeout, setInterval,逛论坛的时候发现了这篇好文章,分享一下. ————————————————————以下为原文—————————— ...
- js,onblur后下一个控件获取焦点判断、html当前活跃控件、jquery版本查看、jquery查看浏览器版本、setTimeout&setInterval
需求: input控件在失去焦点后直接做验证,验证通不过的话,显示相应错误.但是如果失去焦点后点击的下个控件是比较特殊的控件(比如,退出系统),那么不执行验证操作,直接退出系统(防止在系统退出前,还显 ...
- setTimeout/setInterval执行时机
setTimeout()和setInterval()经常被用来处理延时和定时任务.setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则可以在每隔指定的 ...
- js中setTimeout/setInterval定时器用法示例
js中setTimeout(定时执行一次)和setInterval(间隔循环执行)用法介绍. setTimeout:在指定的毫秒数后调用指定的代码段或函数:setTimeout示例代码 functio ...
- setTimeout,setInterval你不知道的…
javascript线程解释(setTimeout,setInterval你不知道的事) 标签: javascript引擎任务浏览器functionxmlhttprequest 2011-11-21 ...
- setTimeout,setInterval你不知道的事
javascript线程解释(setTimeout,setInterval你不知道的事) 标签: javascript引擎任务浏览器functionxmlhttprequest 2011-11-21 ...
- 管理页面的 setTimeout & setInterval
在管理 setTimeout & setInterval 这两个 APIs 时,笔者通常会在顶级(全局)作用域创建一个叫 timer 的对象,在它下面有两个数组成员 —— {sto, siv} ...
- Jquery实现简单到计时功能(setTimeout,setInterval)
要实现一个标签或者按钮进行5秒到计时,非常简单,直接上代码: 倒计时:<span id="timeSpan1" style="color:red;font-size ...
- setInterval计时器延时问题
计时器延时问题 js计时器 使用setTimeout.setInterval函数时,第二个参数的设置的时间间隔t是自该函数(setTimeout(f1,t).setInterval(f1,t))被调用 ...
随机推荐
- 项目从.net core 2.1.0升级到.net core 2.2.4,原有项目出错及解决方案
... 1.Controller中的形参命名为query.pager,且里面实体中的参数也有Query.Pager参数时,Query.Pager 就会无数据. 解决方案: 形参query.pager ...
- 控制反转IOC
IOC-Inversion of Control 控制反转,这是spring的核心.对于spring框架来说,就是由spring来负责控制对象的生命周期和对象间的关系. 1:控制反转不是一种技术,而是 ...
- java的智能提示无法打开
第一步:选中“window”->“preference” 第二步:选中“java”,并展开 第三步:选中“Editor”,并展开 第四步:选中“Content Assist”,在右侧 ...
- Oracle数据库的一些重要概念
一.oracle数据库的结构 完整的Oracle数据库通常由两部分组成:Oracle数据库和数据库实例. 1) 数据库是一系列物理文件的集合(数据文件,控制文件,联机日志,参数文件等): 2) Ora ...
- Deep Convolution Auto-encoder
一.概念介绍 自编码器是一种执行数据压缩的网络架构,其中的压缩和解压缩功能是从数据本身学习得到的,而非人为手工设计的.自编码器的两个核心部分是编码器和解码器,它将输入数据压缩到一个潜在表示空间里面,然 ...
- 使用 lsyncd 同步文件
https://unix.stackexchange.com/questions/307046/real-time-file-synchronization https://github.com/ax ...
- jdbc笔记(一) 使用Statement对单表的CRUD操作
jdbc连接mysql并执行简单的CRUD的步骤: 1.注册驱动(需要抛出/捕获异常) Class.forName("com.mysql.jdbc.Driver"); 2.建立连接 ...
- JZ2440学习笔记之第一个裸机程序(Keil-MDK)
CPU:S3C2440, ARM920T, Internal 4KB RAM, Support boot from NAND flash, 128MB for each bank. JZ2440:Me ...
- Parhaps you are running on a JRE rather than a JDK?
maven项目启动时报错 解决方案: 第一步:在启动项目上右击 第二步:修改JRE为JDK,双击划线部分 第三步:如果没有配置JDK,进行以下操作 第四步:从本地添加JDK 第五步:应用JDK 选择好 ...
- 利用matplotlib库和numpy库画数学图形
首先,电脑要安装到matplotlib库和numpy库,这可以通过到命令符那里输入“pip install matplotlib ”,两个操作一样 其次,参照下列代码: import numpy as ...