setTimeout、setInterval环境应用和使用场景
说明:setTimeout属于超时调用, setInterval 属于间隔调用
1,setTimeout超时的使用介绍:
var setTimeourtId= );
}, );
// 清除的操作
clearTimeout(setTimeourtId);
2, setInterval的间隔使用介绍:
var setIntervalId=);
}, );
clearInterval(setIntervalId);
我们很少使用间歇调用,因为后一个调用可能会在前一个调用结束之前调用,所以就使用超时调用代替间隔调用,超时调用使用是用递归的方法
;
);
} );
介绍完了这个项目中的应用,倒计时的案例,解决误差的问题,
js是单线程的,有可能是回调中的函数影响的,也可能是浏览器各种事件引起的,所以误差是不一样避免的,这时候我们减小误差
1,算出代码执行消耗的时间差
2,下一次循环所消耗的时间
* * *
* * ))
* * )
* ))
* )
)
;
? ? / )
/ );
};
})();
;
? ? flag = false : '';
flag ? e.style.left = ` ${left++}px` :
e.style.left = ` ${left--}px`;
}
(function animloop() {
render();
requestAnimFrame(animloop);
})();
浏览器可以优化并行的动画动作,更合理的重新排列动作序列,并把能够合并的动作放在一个渲染周期内完成,从而呈现出更流畅的动画效果
解决毫秒的不精确性
避免过度渲染(渲染频率太高、tab
不可见暂停等等)
注:requestAnimFrame
和 定时器一样也头一个类似的清除方法 cancelAnimationFrame
。