防抖和节流手写实现 —— js手写系列（一）1. 什么是防抖节流防抖（Debouncing）和节流（Throttlin

1. 什么是防抖节流

防抖（Debouncing）和节流（Throttling）是两种用于控制函数调用频率的技术，通常在处理高频率事件触发时使用，例如浏览器窗口的resize、scroll、input输入等。它们有助于提高性能和避免不必要的函数执行。

1.1 防抖

防抖的基本思想是，将多个连续的函数调用合并为一次，并在一段时间内只执行一次。当触发事件时，设置一个定时器，如果在设定的时间间隔内再次触发该事件，则重新计时，直到间隔时间内没有新的触发事件，此时执行相应的函数。

1.2 节流

节流的基本思想是，在一定时间内只允许函数执行一次，即便在这段时间内触发了多次。与防抖不同的是，节流不会合并连续的函数调用，而是稀释这些调用。

1.3 两者的区别

防抖会合并多个连续的函数调用，而节流则会稀释函数的执行频率。
防抖会在事件的开始和结束时各执行一次，而节流会在一定时间内稳定执行，不管事件的触发频率有多高。

2. 手写防抖

下面将用一个简单的例子来实现防抖，首先通过上面我们知道了，防抖就是当用户多次点击按钮时，在一段时间内只执行一次该按钮的点击事件。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>防抖</title>
</head>

<body>
  <button id="btn">提交</button>
</body>

</html>

实现防抖的功能，首先给按钮添加一个点击事件

const btn = document.getElementById("btn")
function send = function(){
console.log('点击了按钮')
}
btn.addEventListener("click", debounce(send, 1000))

//通过闭包实现防抖
function debounce(fn,delay){
   let timer
   return function(){
   if(timer) clearTimeout(timer)
   timer = setTimeout(()=>{
      fn()
   },delay)
}

3. 手写节流

下面用一个简单的例子来实现节流，首先我们知道了，节流就是在一定的时间内，只执行一次该操作，即便在这段时间内操作了很多次。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>节流</title>
</head>
<body>
  <button id="btn">按钮</button>
</body>
</html>

const btn = document.getElementById('btn')
    btn.addEventListener('click',throttle(send,1000))
    function send(){
      console.log('执行了一次节流')
    }
    // 闭包实现节流
    function throttle(fn,delay){
      let prevTime = Date.now()
      return function(){

        if(Date.now() - prevTime > delay){
          fn()
          prevTime = Date.now()
        }
      }
    }