前言：
今天小伙伴们对“js间隔器”大概比较关心，大家都想要了解一些“js间隔器”的相关知识。那么小编也在网摘上汇集了一些关于“js间隔器””的相关文章，希望你们能喜欢，朋友们快快来了解一下吧！什么是定时器？
定时器就是可以定时一段时间后执行某些功能，或者每隔一段时间重复执行某些功能。
定时器和循环的区别要尤其注意，循环结构内部使用延时函数也可以实现定时器的重复执行效果，但是如果使用循环加延时，程序是阻塞的，会一直停留在循环过程中，循环结构后面的程序无法执行。即计算机资源一直处于被占用状态，消耗也很大。
定时器是只在触发的时刻执行指定功能，没有到触发时刻程序不会阻塞，按照顺序，正常执行定时器后面的程序。
setTimeout()
语法：
setTimeout(func,millisec)
参数
描述
func
要调用的函数后要执行的 JavaScript 代码串。
millisec
在执行代码前需等待的毫秒数。
功能：在指定的毫秒数后调用函数。
setTimeout(function(){ alert("start");}, 3000);setInterval()语法：
setInterval(func,millisec)
参数
描述
func
要调用的函数后要执行的 JavaScript 代码串。
millisec
周期性执行func的时间间隔，以毫秒计。
功能：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
setInterval(function(){ console.log("hioier.com");}, 1000);简易计时器项目实现一个计时器，绿色方框内数字从0开始，每隔1s增加1。
<style> #d1{ width:200px; height:200px; color:white; font-size:100px; background:green; text-align:center; line-height:200px; }</style><body> <div id="d1">0</div> <script> let d1 = document.getElementById("d1"); let n = 0; setInterval(function(){ d1.innerHTML = n++; }, 1000); </script></body>跳跃坠落两张图片循环切换例如：两张图片的名字分别为11.jpg和12.jpg，只需设置一个变量在11和12之间切换即可。
<style> #d1 { width: 500px; height: 400px; }</style><body> <img id="d1" src="images/11.jpg"/> <script> let d1 = document.getElementById("d1"); let n = 11; setInterval(function(){ n++; if(n > 12) n = 11; d1.src = `images/${n}.jpg`; }, 500); </script></body>停止定时器，按下停止跳跃按钮，停止跳跃。
<body> <img id="d1" src="images/11.jpg"/> <button id="btn_stop">停止跳跃</button> <script> let d1 = document.getElementById("d1"); let btn_stop = document.getElementById("btn_stop"); let n = 11; let timer = setInterval(function(){ n++; if(n > 12) n = 11; d1.src = `images/${n}.jpg`; }, 500); btn_stop.onclick = function(){ clearInterval(timer); } </script></body>拆除炸弹炸弹倒计时10s，如果没有拆除就会爆炸，现在请你点击按钮拆除炸弹。
<style> #d1 { text-align: center; } #d3 { width: 100px; height: 100px; color: white; font-size: 50px; background: green; text-align: center; line-height: 100px; margin: 0 auto; } </style><div id="d1"> <button id="btn"> 开始拆弹 </button> <div id="d2"> <img src="images/7.gif"/> <div> <div id="d3"> 10 </div> </div> </div> </div>
<script> let d3 = document.getElementById("d3"); let btn = document.getElementById("btn"); let n = 10; let timer = setInterval(function(){ d3.innerHTML = n--; if(n < 0){ alert("BOOM!"); n = 10; } }, 1000); btn.onclick = function(){ clearInterval(timer); alert("拆弹成功！"); } </script>视频讲解视频加载中...
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #js间隔器
