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 计时器的更多相关文章

  1. js异步处理工作机制(setTimeout, setInterval)

    经常谈到异步,但是发现自己一直没深入理解setTimeout, setInterval,逛论坛的时候发现了这篇好文章,分享一下. ————————————————————以下为原文—————————— ...

  2. js,onblur后下一个控件获取焦点判断、html当前活跃控件、jquery版本查看、jquery查看浏览器版本、setTimeout&setInterval

    需求: input控件在失去焦点后直接做验证,验证通不过的话,显示相应错误.但是如果失去焦点后点击的下个控件是比较特殊的控件(比如,退出系统),那么不执行验证操作,直接退出系统(防止在系统退出前,还显 ...

  3. setTimeout/setInterval执行时机

    setTimeout()和setInterval()经常被用来处理延时和定时任务.setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则可以在每隔指定的 ...

  4. js中setTimeout/setInterval定时器用法示例

    js中setTimeout(定时执行一次)和setInterval(间隔循环执行)用法介绍. setTimeout:在指定的毫秒数后调用指定的代码段或函数:setTimeout示例代码 functio ...

  5. setTimeout,setInterval你不知道的…

    javascript线程解释(setTimeout,setInterval你不知道的事) 标签: javascript引擎任务浏览器functionxmlhttprequest 2011-11-21 ...

  6. setTimeout,setInterval你不知道的事

    javascript线程解释(setTimeout,setInterval你不知道的事) 标签: javascript引擎任务浏览器functionxmlhttprequest 2011-11-21 ...

  7. 管理页面的 setTimeout & setInterval

    在管理 setTimeout & setInterval 这两个 APIs 时,笔者通常会在顶级(全局)作用域创建一个叫 timer 的对象,在它下面有两个数组成员 —— {sto, siv} ...

  8. Jquery实现简单到计时功能(setTimeout,setInterval)

    要实现一个标签或者按钮进行5秒到计时,非常简单,直接上代码: 倒计时:<span id="timeSpan1" style="color:red;font-size ...

  9. setInterval计时器延时问题

    计时器延时问题 js计时器 使用setTimeout.setInterval函数时,第二个参数的设置的时间间隔t是自该函数(setTimeout(f1,t).setInterval(f1,t))被调用 ...

随机推荐

  1. visual studio 中被遗忘的任务列表和书签

    任务列表(Task List)是VS中被人遗忘的一个功能,用到跳转到不同的代码段非常不便.以后就不用每次前进和后退导航了. 使用“任务列表” 跟踪使用 TODO 和 HACK或自定义令牌等令牌的代码注 ...

  2. _sntprintf_s 和 _sntprintf 区别

    https://docs.microsoft.com/en-us/cpp/c-runtime-library/reference/snprintf-s-snprintf-s-l-snwprintf-s ...

  3. idea 2018.1 for mac破解激活方法---到2099

    https://blog.csdn.net/weixin_41470864/article/details/81607169

  4. Windows 10 关闭Hyper-V

    以管理员身份运行命令提示符 关闭 bcdedit /set hypervisorlaunchtype off 启用 bcdedit / set hypervisorlaunchtype auto 禁用 ...

  5. Windows下安装Redis服务

    说明:本文拷贝自https://jingyan.baidu.com/article/0f5fb099045b056d8334ea97.html Redis是有名的NoSql数据库,一般Linux都会默 ...

  6. GTID 跳过事物

    Mysql5.7 stop slave; set @@SESSION.GTID_NEXT='507e80e9-3648-11e9-aa70-fa163e77a52d:20173'; begin; co ...

  7. linux awk用法

    awk是一个强大的文本分析工具,在对数据进行分析并生成报告时显得尤为强大. 使用方法:awk [options]  'BEGIN{ commands } pattern{ commands } END ...

  8. SAP主数据文件版本号命名规范

    前提说明 最近在实施公司的SAP系统,需要对供应商,成品半成品原辅料,工艺路线,BOM等各种主数据进行收集,由于牵扯到多个部门进行合作整理数据,为了更方便进行文件版本的管理,特意学习下文件版本号命名规 ...

  9. 【题解】Luogu P4069 [SDOI2016]游戏

    原题传送门 看到这种题,想都不用想,先写一个树链剖分 然后发现修改操作增加的是等差数列,这使我们想到了李超线段树 先进性树剖,然后用李超线段树维护区间最小,这样就做完了(写码很容易出错) 复杂度为\( ...

  10. 【双目备课】《学习OpenCV第18章》相机模型与标定整编

    一.相机模型 针孔模型.在这个简单模型中,想象光线是从场景或一个很远的物体发射过来的,但只有一条光线从该场景中的任意特定点进入针孔. 我们将这个图像进行抽象,就能够得到这样的结果: 其中,f为像到针孔 ...