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