setTimeout/setInterval,属性、连续动画、倒计时的分析-白红宇

setTimeout/setInterval,属性、连续动画、倒计时的分析

阅读量：5833 次

发布时间：2019-06-18

本文共 2639 字，大约阅读时间需要 8 分钟。

setTimeout、setInterval环境应用和使用场景

说明：setTimeout属于超时调用， setInterval 属于间隔调用

1，setTimeout超时的使用介绍：

      var setTimeourtId= 
setTimeout( 
function () { 
console. 
log( 
33333); 
      }, 
1000); 
  // 清除的操作
  clearTimeout(setTimeourtId);
 

2， setInterval的间隔使用介绍：

      var setIntervalId= 
setInterval( 
function () { 
console. 
log( 
4444); 
      }, 
1000); 
 clearInterval(setIntervalId); 
 

我们很少使用间歇调用，因为后一个调用可能会在前一个调用结束之前调用，所以就使用超时调用代替间隔调用，超时调用使用是用递归的方法

var
count = 
0; 
var
s = 
4
function
set() { 
count++; 
if ( 
count < 
s) { 
setTimeout( 
set, 
1000); 
      } 
else { 
console. 
log( 
'set======'); 
      } 
      } 
setTimeout( 
set, 
1000); 

介绍完了这个项目中的应用，倒计时的案例，解决误差的问题,

js是单线程的，有可能是回调中的函数影响的，也可能是浏览器各种事件引起的，所以误差是不一样避免的，这时候我们减小误差

1，算出代码执行消耗的时间差

2，下一次循环所消耗的时间

var
period = 
60 * 
1000 * 
60 * 
2
var
startTime = 
new
Date(). 
getTime(); 
var
count = 
0
var
end = 
new
Date(). 
getTime() + 
period
var
interval = 
1000
var
currentInterval = 
interval
 
function
loop() { 
count++ 
var
offset = 
new
Date(). 
getTime() - ( 
startTime + 
count * 
interval); 
// 代码执行所消耗的时间
var
diff = 
end - 
new
Date(). 
getTime() 
var
h = 
Math. 
floor( 
diff / ( 
60 * 
1000 * 
60)) 
var
hdiff = 
diff % ( 
60 * 
1000 * 
60) 
var
m = 
Math. 
floor( 
hdiff / ( 
60 * 
1000)) 
var
mdiff = 
hdiff % ( 
60 * 
1000) 
var
s = 
mdiff / ( 
1000) 
var
sCeil = 
Math. 
ceil( 
s) 
var
sFloor = 
Math. 
floor( 
s) 
currentInterval = 
interval - 
offset
// 得到下一次循环所消耗的时间
console. 
log( 
'时：'+ 
h, 
'分：'+ 
m, 
'毫秒：'+ 
s, 
'秒向上取整：'+ 
sCeil, 
'代码执行时间：'+ 
offset, 
'下次循环间隔'+ 
currentInterval) 
// 打印 时 分 秒 代码执行时间 下次循环间隔
setTimeout( 
loop, 
currentInterval) 
       } 
setTimeout( 
loop, 
currentInterval) 
 

动画

css 实现的方式

animate
mymove 5 
s
infinite; 
      @ 
keyframes
mymove{ 
from { 
      left:10 
px; 
      } 
to { 
      left:0 
px; 
      } 
      } 

js实现的方法浏览器的刷新频率是60hz

var
e = 
document. 
getElementById( 
'e') 
var
flag = 
true; 
var
left = 
0; 
setInterval(() 
=> { 
left == 
0 ? 
flag = 
true : 
left == 
100 ? 
flag = 
false : 
''
flag ? 
e. 
style. 
left = 
` 
${ 
left++ 
}
px` : 
e. 
style. 
left = 
` 
${ 
left-- 
}
px`
      }, 
1000 / 
60) 

requestAnimationFrame

//兼容性处理
window. 
requestAnimFrame = ( 
function(){ 
return
window. 
requestAnimationFrame || 
window. 
webkitRequestAnimationFrame || 
window. 
mozRequestAnimationFrame || 
function( 
callback){ 
window. 
setTimeout( 
callback, 
1000 / 
60); 
      }; 
      })(); 
var
e = 
document. 
getElementById( 
"e"); 
var
flag = 
true; 
var
left = 
0; 
function
render() { 
left == 
0 ? 
flag = 
true : 
left == 
100 ? 
flag = 
false : 
''; 
flag ? 
e. 
style. 
left = 
` 
${ 
left++ 
}
px` : 
e. 
style. 
left = 
` 
${ 
left-- 
}
px`; 
      } 
      ( 
function
animloop() { 
render(); 
requestAnimFrame( 
animloop); 
      })(); 

浏览器可以优化并行的动画动作，更合理的重新排列动作序列，并把能够合并的动作放在一个渲染周期内完成，从而呈现出更流畅的动画效果解决毫秒的不精确性避免过度渲染（渲染频率太高、

tab 不可见暂停等等）注：

requestAnimFrame 和定时器一样也头一个类似的清除方法

cancelAnimationFrame。

转载于:https://www.cnblogs.com/yayaxuping/p/9714925.html

你可能感兴趣的文章