zoukankan      html  css  js  c++  java
  • setTimeout、setInterval 和 requestAnimationFrame 之间的区别

    setTimeout和setInterval的区别:
    setTimeout()是延时器,setInterval()是定时器,setTimeout()在执行的时,是在载入后延迟指定时间后,去执行一次表达式,次数是一次,而setInterval()则不一样,它从载入后,每隔指定的时间就执行一次表达式

    setTimeout()
    setTimeout()用于延时执行参数指定的代码,如果在指定的延迟时间之前,想取消这个执行,可以用clearTimeout(timerId) timerId 是 setTimeout 时返回的;
    语法:
    var timerId = setTimeout(func|code, delay)
    code/function 必需。要调用一个代码串,也可以是一个函数。
    milliseconds 可选。执行或调用 code/function 需要等待的时间,以毫秒计。默认为 0。

        <button onclick="fun()">点我</button>
        <button onclick="myStopFunction()">阻止弹出</button>
     var timerId;
    
      function fun() {
                timerId = setTimeout(function () {
                    alert("Hello")
                }, 3000);
      }
    
     function myStopFunction() {
                clearTimeout(timerId);
     } 

    setInterval()

    setInterval()用于每隔一段时间执行指定的代码,永无停歇,想清除它,可以使用 clearInterval(intervalId),这样从调用 clearInterval intervalId 是 setInterval 时返回的;
    语法:
    setInterval(code, milliseconds);
    setInterval(function, milliseconds, param1, param2, ...)
    code/function 必需。要调用一个代码串,也可以是一个函数。
    milliseconds 必须。周期性执行或调用 code/function 之间的时间间隔,以毫秒计。

        <p>显示时间:<span id="date"></span></p>
        <button onclick="clearTime()">停止时间</button>
    

      

    var mTime = setInterval(function () {
                oTime()
            }, 1000);
    
            function oTime() {
                var date = new Date();
                var time = date.toLocaleTimeString();
                document.getElementById('date').innerHTML = time;
            }
    
            function clearTime() {
                clearInterval(mTime);
            }
    

      

    requestAnimationFrame(code)

    requestAnimationFrame(code),一般用于动画,与 setTimeout 方法类似,区别是 setTimeout 是用户指定的,而 requestAnimationFrame 是浏览器刷新频率决定的,一般遵循 W3C 标准,它在浏览器每次刷新页面之前执行。
    语法:
    window.requestAnimationFrame(callback);

    requestAnimationFrame 比起 setTimeout、setInterval的优势主要有两点:
    1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,一般来说,这个频率为每秒60帧。
    2、在隐藏或不可见的元素中,requestAnimationFrame将不会进行重绘或回流,这当然就意味着更少的的cpu,gpu和内存使用量。

    注: IE9-浏览器不支持该方法

    <div style="border:1px solid #ddd; 500px;margin: 50px 0 10px;">
            <div id="box">0%</div>
        </div>
        <button id="btn">点击</button>
    

      

    var timer;
            btn.onclick = function () {
                box.style.width = '0';
                timer = requestAnimationFrame(function fn() {
                    if (parseInt(box.style.width) < 500) {
                        box.style.width = parseInt(box.style.width) + 5 + 'px';
                        box.innerHTML = parseInt(box.style.width) / 5 + '%';
                        timer = requestAnimationFrame(fn);
                    } else {
                        cancelAnimationFrame(timer);
                    }
                })
            }
    

      

  • 相关阅读:
    iOS必备知识点
    stringByReplacingOccurrencesOfString
    iPhone X 设计适配指南 & iOS 11 新特性
    block与property
    swift开发笔记04
    category重写系统方法的调用顺序是怎么样的?
    Error: Chunk.entry was removed. Use hasRuntime()错误解决
    李阳音标速成MP3文本
    JavaScript权威指南(第6版)(中文版)笔记
    Idea检入boss项目
  • 原文地址:https://www.cnblogs.com/ling-nl/p/14245218.html
Copyright © 2011-2022 走看看