setTimeout/setInterval,属性、连续动画、倒计时的分析
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 5s infinite;
@keyframes mymove{
from {
left:10px;
}
to {
left:0px;
}
}
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。
