定时器
----setTimeout() clearTimeout()
在指定的毫秒数到达之后执行指定的函数,只执行一次
// 创建一个定时器,1000毫秒后执行,返回定时器的标识
var timerId = setTimeout(function () {
console.log('Hello World');
}, 1000);
// 取消定时器的执行
clearTimeout(timerId);
----setInterval() clearInterval()
定时调用的函数,可以按照给定的时间(毫秒)周期调用函数
// 创建一个定时器,每隔1秒调用一次
var timerId = setInterval(function () {
var date = new Date();
console.log(date.toLocaleTimeString());
}, 1000);
// 取消定时器的执行
clearInterval(timerId);
注意事项:
1.HTML5规范规定了最小延迟时间不得小于4ms,即如果小于4ms,会被当做4ms来处理
2.由于javascript是单线程,执行队列需要进行插入调整,所以setInterval会出现下述问题:a.某些间隔会被跳过 b.多个定时器的代码执行间隔可能会比预期的要小
3.定时器调用传入函数名称+() 会导致回调函数直接执行
4.通过setTimeout递归自调用可以替代setInterval
5.当前页面处于hide(不可见 离开)状态时,定时器会休眠,但是队列会持续添加,会导致失序
----递归setTimeout实现有序的定时序列
防抖和节流
----防抖
指触发事件后在n秒内函数只能执行一次,如果在n秒内又触发了事件,则会重新计算函数执行时间
策略:当事件被触发时,设定一个周期延迟执行动作,若周期又被触发,则重新设定周期,直到周期结束,执行动作
----节流
指连续触发事件但是在n秒中只执行一次函数
节流会稀释函数的执行频率
策略:固定周期内,只执行一次动作,若没有新事件触发,不执行;周期结束后,又有事件触发,开始新的周期
特点:连续高频触发事件时,动作会被定期执行,响应平滑
计时器版节流
时间戳版节流
束流器版节流