setTimeout setInterval 性能比较

作者: AAA前端 | 来源:发表于2019-01-24 17:36 被阅读0次

setTimeout setInterval 性能比较
settimeout()和setInterval()
setTimeout/setInterval
setTimeout和setInterval深入理解
setTimeout用法&任务队列&函数节流原理
客户端的JavaScript（二）
JS定时器
前端动画“大比拼”
总结3
记一次UC的面试

前面有时候在做重复调用时，我试过在回调函数中再次使用setTimeout调用函数，以达到setInterval的效果。虽然感觉区别不大。今天闲着自己试验了一下。

首先是用setInterval 结果在完成的时候，时间差为1961毫秒左右

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        span {
            position: absolute;
            left: 0;
            top: 10%;
        }
    </style>
</head>
<span id="box">哈哈</span>

<body>
    <script src="https://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script>
    <script>
        var count = 10;
        var startTime = new Date();
        var $box = $('#box');

        function move() {
            if ($box.css('left').slice(0, -2) - 0 < 200) {
                $box.css('left', count + "px")
                count = count + 1;
                // setTimeout(move, 10)
                // requestAnimationFrame(move)
            } else {
                var now = new Date() - startTime;
                console.log(now)  // 1961
                clearInterval(timer)
            }
        }

        // setTimeout(move, 10)
        // requestAnimationFrame(move)
        var timer = setInterval(move, 10)
    </script>
</body>
</html>

接下来是setTimeout 结果为2151左右

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        span {
            position: absolute;
            left: 0;
            top: 10%;
        }
    </style>
</head>
<span id="box">哈哈</span>

<body>
    <script src="https://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script>
    <script>
        var count = 10;
        var startTime = new Date();
        var $box = $('#box');

        function move() {
            if ($box.css('left').slice(0, -2) - 0 < 200) {
                $box.css('left', count + "px")
                count = count + 1;
                setTimeout(move, 10)
                // requestAnimationFrame(move)
            } else {
                var now = new Date() - startTime;
                console.log(now)  // 2151
                // clearInterval(timer)
            }
        }

        setTimeout(move, 10)
        // requestAnimationFrame(move)
        // var timer = setInterval(move, 10)
    </script>
</body>
</html>

由此可以看出如果仅仅是性能的话，在一定频率的情况下，setInterval是要比setTimeout要好的。但是如果是用作动画的话，每个浏览器的频率不同，也就可能造成有的浏览器上动画还没完成，就开始了下一次动画。
所以如果是关于动画，推荐使用requestAnimationFrame（回流、重绘跟随浏览器的刷新频率）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        span {
            position: absolute;
            left: 0;
            top: 10%;
        }
    </style>
</head>
<span id="box">哈哈</span>

<body>
    <script src="https://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script>
    <script>
        var count = 10;
        var startTime = new Date();
        var $box = $('#box');

        function move() {
            if ($box.css('left').slice(0, -2) - 0 < 200) {
                $box.css('left', count + "px")
                count = count + 1;
                // setTimeout(move, 10)
                requestAnimationFrame(move)
            } else {
                var now = new Date() - startTime;
                console.log(now)  // 3623
                // clearInterval(timer)
            }
        }

        // setTimeout(move, 10)
        requestAnimationFrame(move)
        // var timer = setInterval(move, 10)
    </script>
</body>
</html>

*最后虽然是时间长了，但是动画变得流畅了。