JavaScript定时器

最新推荐文章于 2022-06-29 19:39:27 发布

CinderellaLi_

最新推荐文章于 2022-06-29 19:39:27 发布

阅读量100

点赞数

分类专栏： JavaScript 文章标签： javascript html5 html

本文链接：https://blog.csdn.net/CinderellaLi_/article/details/120719174

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript中的setTimeout和setInterval函数，用于实现延迟执行和周期性执行任务。还讲解了如何清除定时器，并提供了一个封装的运动过程函数，展示了JavaScript在页面动画处理上的应用。

摘要由CSDN通过智能技术生成

一、定时器

setTimeout(fn, time)：在指定的time(ms)时间之后执行一次某个函数fn
setInterval(fn, time)：循环间隔时间time(ms)之后执行某个函数fn

(1)延时函数

基本语法

 <body>
     <div id="box"></div>
     <script> 
         var _box = document.getElementById("box")
         
         // 1、简洁语法 
         // setTimeout(function() {
         // _box.innerHTML = "<h1>延时器函数执行了</h1>" 
         // }, 3000) 
         
         // 2、标准语法 
         function fn() {
             _box.innerHTML = "<h1>延时器函数执行了</h1>"
         }
         // 延时器函数中，要执行的函数名称不要添加括号 
         setTimeout(fn, 3000) 
     </script> 
 </body>

(2)计时器函数

基本语法

 <body>
     <div id="counter">准备开始...</div>
     <button id="start">开始计数</button>
     
     <script> 
         var _counter = document.getElementById("counter") 
         var _start = document.getElementById("start") 
         var index = 1 
         _start.onclick = function() {
             // 执行计时器函数 
             setInterval(function() {
                 _counter.innerText = index index++ 
             }, 1000) } 
     </script>
 </body>

(3) 清除定时器

JavaScript语法规范中，为了完善语法功能，在定时器函数的基础上，提供了清除定时器函数；

当清除定时器函数执行时，会将延时函数、计时函数的效果直接终止！

var t = setTimeout(fn, timer)延时器函数
clearTimeout(t)：终止延时器函数的执行
var t = setInterval(fn, timer)计时器函数
clearInterval(t)：终止计时器函数

(4)动画封装

 /**
 * 获取指定元素ele的styleName的样式值 
 */ 
 function getStyle(ele, styleName) { 
     if(ele.currentStyle) {
         return ele.currentStyle[styleName] 
     } else { 
         return getComputedStyle(ele)[styleName]
     } 
 }
 
 /**
 * 封装运动过程 
 * ele：要运动的标签(element)
 * attr：变化的属性名称（attribute）
 * speed：运动的速度 
 * target：目标位置
 */
 var timer = null
 function move(ele,attr,speed,target){
     //开始动画时清楚上一次动画
     clearInterval(timer)
     //开始计时器的动画
     timer = setInterval(function(){
         var tgt = parseInt(getStyle(ele, attr)) + speed
         if((speed > 0 && tgt > target) || (speed < 0 && tgt < target)){
             clearInterval(timer)
         }
         ele.style[attr] = tgt + "px"
     },)
 }