手写题：节流、防抖

防抖

提示💡

需要一个定时器 timer 。

// 防抖函数  
function debounce(func, wait) {  
	let timeout;  
	return function (...args) {  
	  const context = this;  
	  clearTimeout(timeout);  
	  timeout = setTimeout(() => func.apply(context, args), wait);  
	};  
}  

// func是用户传入需要防抖的函数
// wait是等待时间
const debounce = (func, wait = 50) => {
  // 缓存一个定时器id
  let timer = 0
  // 这里返回的函数是每次用户实际调用的防抖函数
  // 如果已经设定过定时器了就清空上一次的定时器
  // 开始一个新的定时器，延迟执行用户传入的方法
  return function(...args) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(this, args)
    }, wait)
  }
}

节流

使用 setTimeout 实现

提示💡

需要一个标志器 inThrottle 。

// 节流函数  
function throttle(func, limit) {
  let inThrottle;
  return function (...args) {
    const context = this;
    if (inThrottle) return;
    func.apply(context, args);
    inThrottle = true;
    setTimeout(() => (inThrottle = false), limit);
  };
}

下面是测试代码：

setInterval(
  throttle(() => {
    console.log(1);
  }, 2000),
  1
);

使用 new Date() 实现

提示💡

需要一个标志器 lastTime 。

// func是用户传入需要防抖的函数
// wait是等待时间
const throttle = (func, wait = 50) => {
  // 上一次执行该函数的时间
  let lastTime = 0
  return function(...args) {
    // 当前时间
    let now = +new Date()
    // 将当前时间和上一次执行函数时间对比
    // 如果差值大于设置的等待时间就执行函数
    if (now - lastTime > wait) {
      lastTime = now
      func.apply(this, args)
    }
  }
}

下面是测试代码：

setInterval(
  throttle(() => {
    console.log(1)
  }, 500),
  1
)

提示💡

Js中的+new Date() 表示什么意思

扩展阅读

• 什么是防抖和节流！有什么区别！如何实现！