js实现内置计时器

时间：2021-05-26

计时器对于图片轮播和倒计时之类的与时间相关的项目有着很大的联系，它是实现这些的核心语法，如何一次深刻理解js计时器？往下看你就知道，有惊喜哦！

js计时器有两种，一种为延时后单次的执行，另一种为延时多次执行。通过函数的递归，前者也可以打破壁垒，拥有循环执行的功能。

setTimeout( javascript语句 ,毫秒);
（其中第一个值可以是一个函数 需要加" "，也可以是代码）

//延迟一段时间 执行 执行一次

setInterval("javascript语句" ,毫秒);
（其中第一个值可以是一个函数 需要加" "，也可以是代码）

//循环执行

具体实例 （一些细节和具体的用法还是在案例代码中便于理解）

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>计时器</title> </head> <body> <button id="none">停止计时器</button> <button id="start">开始计时器</button> <script> // 有两个计时器 // setTimeout(); // 延迟一段时间 执行 执行一次 // setInterval(); // 循环执行 var stoptime=document.getElementById('none');//默认从零开始自加 获取开始按钮 var starttime=document.getElementById('start');//获取停止按钮 var count=0; var timecount; // 第一种 //优点：重启计时器简单，由于是原本是单次执行，只需将之前的递归函数重新复制即可 缺点：需要递归调用 // 第二种 showtime(); function showtime(){//封装函数 timecount=setInterval(function(){ count++; console.log(count); },1000) } stoptime.onclick=function(){ clearInterval(timecount); } starttime.onclick=function(){ showtime(); }//优点：不需要递归调用，直接实现循环。缺点：重启较复杂，需要调用所有函数，建议封装函数。 </script></body> </html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章