【手撕之JS基础】2) 实现节流函数

一、原理

节流函数throttle：用于限制某个函数在一定时间间隔内只能执行一次。这可以在处理频繁触发的事件时很有用，例如处理用户输入或滚动事件

• 如果事件被频繁触发，那么节流函数会按照一定的频率来执行回调函数
• 不管在"等待时间"中触发事件多少次，回调函数的执行频率都是固定的

二、代码实现

关于this指向，关于参数，参看手写防抖函数

1. 时间戳实现throttle

思路：

1. 通过两个时间戳控制时间间隔，当事件被触发时，记录触发时的时间戳now
2. 定义变量prev记录上一次执行回调函数的时间戳（prev初始值为0）
3. 如果now-prev >= delay，就执行回调函数，同时更新prev

function throttle(callback,delay){
  var prev = 0;

  function _throttle(...args){
    var now = Date.now()  //回调函数callback触发时的时间
    if(now - prev >= delay){
      callback.apply(this,args)
      prev = now
    }
  }

  return _throttle
}

const throttleFn = throttle(fn,2000)
btn.onclick = throttleFn(参数)

如果我用这个节流函数包装回调函数（假设是触发鼠标移动事件）

1. 鼠标移入时，事件的回调函数立即执行一次
2. 每隔2s执行一次回调函数，鼠标停止移动，回调函数不会再执行

2. 定时器实现throttle

思路：
使用定时器实现节流函数的思路是：在函数被触发时，设置一个定时器，在定时器延迟结束后将回调函数放入任务队列等待执行。如果在延迟期间再次触发了函数，直接return(而不是清除之前的定时器并设置新的定时器，这样可以保持之前的定时器继续等待执行，而不会被中断）。这样就能够确保在一定时间内只执行一次函数，从而实现节流效果

1. 创建变量timerId存储开启的定时器的id
2. if判断定时器是否存在，如果存在则直接return，否则执行定时器
3. delay时间后，回调函数放进任务队列中，同时清空定时器（不清除的话，timerId一直存在，就会一直return了）

function throttle(callback,delay){
  var timerId = null;   // 初始化定时器的id

  function _throttle(...args){
    if(timerId) return;  // 如果定时器存在(相当于在延迟期间再次触发事件)
    
    timerId = setTimeout(()=>{
      callback.apply(this,args)
      timerId = null;
    },delay)
  }
}

const throttleFn = throttle(fn,2000) 

如果我用这个节流函数包装回调函数（假设是触发鼠标移动事件）

1. 鼠标移入时，事件的回调函数不会立即执行一次
2. 每隔2s执行一次回调函数，鼠标停止移动，回调函数再执行一次