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);

})();