定时器 防抖 节流

定时器

----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秒中只执行一次函数

节流会稀释函数的执行频率

策略：固定周期内，只执行一次动作，若没有新事件触发，不执行；周期结束后，又有事件触发，开始新的周期

特点：连续高频触发事件时，动作会被定期执行，响应平滑

计时器版节流

时间戳版节流

 

 束流器版节流