setTimeout,setinterval和requestAnimationFrame

计时器按照时间反复执行;
setTimeout一次性计时器 延迟多长时间去执行 ,相对应关闭计时器的方法是:clearTimeout()
setinterval循环计时器 ,相对应关闭计时器的方法是: clearInterval()
以上两个计时器时间可以设置,缺点:在网页缩小或者切换选项卡之后计时器继续执行
如何将setTimeout改造为循环计时器

showtime();
    function showtime(){
        console.log(1);
        t=setTimeout("showtime()",1000);
    }

window.requestAnimationFrame()其实这是为了做动画专用的一个方法,这个方法会告诉浏览器,我要执行的这个步骤是一个动画,优点是可以在网页缩小或者和切换选项卡之后计时器暂停;缺点是:时间没办法设置,时间是按照电脑屏幕刷新时间,大概1000/60=16ms
但是我们可以将它们的优缺点结合,
第一种:将window.requestAnimationFrame()与setTimeout结合,构造一个既可以设置时间又可以在网页缩小或者切换选项卡时计时器暂停


    loop();
    function loop(){
        console.log(1);
        setTimeout(function (){
            window.requestAnimationFrame(loop);
        },1000);
     
    }

第二种:只使用window.requestAnimationFrame(),利用Date对象设置一定时间

 var time=new Date().getTime();
   loop();
    function loop(){
        var times=new Date().getTime();
          //根据日期的时间计算1000ms
        if(times-time>=1000)
        {
            time=times;
            console.log(1);
       }
        times=null;
        window.requestAnimationFrame(loop);
     }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值