手写节流 throttle、防抖 debounce

"Throttle"和"debounce"是两个常用的前端开发概念，用于控制函数的执行频率。它们通常被用于处理事件的连续触发，并防止过多的函数调用。虽然英文中的这两个术语在技术上有所区别，但在中文翻译中常常被统称为"截流防抖"。

"Throttle"的意思是限制函数的执行频率，确保在一定时间间隔内只执行一次函数调用。例如，假设一个按钮点击事件会触发一个函数，使用"throttle"后，无论用户点击按钮多少次，该函数只会以一定的频率执行。这有点类似于节流阀的作用，限制了函数的执行。

"Debounce"的意思是在函数被连续调用时，只执行最后一次调用，而忽略之前的调用。例如，当用户在搜索框中连续输入时，可以使用"debounce"来确保只在用户停止输入一段时间后才进行搜索操作。这就像是按下按钮时，只有最后一次按下的操作被执行。

节流：

// 节流就是「技能冷却中」
const throttle = (fn, time) => {
  let 冷却中 = false
  return (...args) => {
    if(冷却中) return
    fn.call(undefined, ...args)
    冷却中 = true
    setTimeout(()=>{
      冷却中 = false
    }, time)
  }
}
// 还有一个版本是在冷却结束时调用 fn
// 简洁版，删掉冷却中变量，直接使用 timer 代替
const throttle = (f, time) => {
  let timer = null
  return (...args) => {
  		console.log('args11', args)
		if(timer) {return}
		f.call(undefined, ...args)
		timer = setTimeout(()=>{
		  timer = null
		}, time)
  }
}

function test(a, b) {
	console.log('a,b', a,b)
}
throttle(test('eee', 'ff'), 10000)

使用方法：

const f = throttle(()=>{console.log('hi')}, 3000)
f() // 打印 hi
f() // 技能冷却中

防抖：

// 防抖就是「回城被打断」
const debounce = (fn, time) => {
  let 回城计时器 = null
  return (...args)=>{
    if(回城计时器 !== null) {
      clearTimeout(回城计时器) // 打断回城
    }
    // 重新回城
    回城计时器 = setTimeout(()=>{
      fn.call(undefined, ...args) // 回城后调用 fn
      回城计时器 = null
    }, time)
  }
}