setTimeout setInterval 性能比较
2019-01-24 本文已影响0人
AAA前端
前面有时候在做重复调用时，我试过在回调函数中再次使用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>
*最后虽然是时间长了，但是动画变得流畅了。
