最新消息:文章中包含代码时,请遵守代码高亮规范!

定时器运行机制及原理

原创文章 user 62浏览 0评论
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>跑马灯效果</title>
<script src="js/vue-2.4.0.js"></script>
</head>
    <body>
        <div id="app">
            <input type="button" value="开始" @click="start">
            <input type="button" value="停止" @click="stop">
            <h4 v-text='msg'></h4>
        </div>
    </body>
<script>
    var vm=new Vue({
       el:'#app',
       data:{
         msg:'大吉大利,我是知识库~~~',
         intervalId:null
         },
       methods:{
         start(){
            var that=this;
            if (that.intervalId!=null) return;
            that.intervalId=setInterval(function(){
                var start=that.msg.substring(0,1);
                var end=that.msg.substring(1);
                that.msg=end+start;
            },100);
            //此处打印intervalId;
            console.log(that.intervalId);
                
            },
         stop(){
             var that=this;
             clearInterval(that.intervalId);
             that.intervalId=null;
          }
        
      }
    })
</script>
</html>

在学习Vue的时候写了一个定时器demo(代码如上),在运行过程中发现了如果连续按开始键,它会增加定时器速度bug,找到原因(是每次启动定时器没有关闭定时器导致),于是给它加了一行:

if (that.intervalId!=null) return;

这个bug解决了,但是打印console.log(that.intervalId);结果出现如图所示

1.png

原来是JavaScript引擎是单线程的;

  • var id = setTimeout(fn, delay); – 初始化一个计时器,然后在指定的时间间隔后执行。该函数返回一个唯一的标志ID(Number类型),我们可以使用它来取消计时器。
  • var id = setInterval(fn, delay); – 和setTimeout有些类似,但它是连续调用一个函数(时间间隔是delay参数)直到它被取消。
  • clearInterval(id);clearTimeout(id); – 使用计时器ID(setTimeout 和 setInterval的返回值)来取消计时器回调的发生

总结:

  • JavaScript引擎是单线程的,强制所有的异步事件排队等待执行。
  • setTimeout 和 setInterval 在执行异步代码的时候有着根本的不同。
  • 如果一个计时器被阻塞而不能立即执行,它将延迟执行直到下一次可能执行的时间点才被执行(比期望的时间间隔要长些)。
  • 如果setInterval回调函数的执行时间将足够长(比指定的时间间隔长),它们将连续执行并且彼此之间没有时间间隔。

转载时请注明出处及相应链接,本文永久地址:https://blog.yayuanzi.com/25263.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者Miya的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!