前端js 防抖和节流有什么区别以及函数封装

防抖：

防抖触发高频率事件时n秒后只会执行一次，如果n秒内再次触发，则会重新计算。

简单概括：每次触发时都会取消之前的延时调用。

fn：回调函数，里面可以做数据请求，delay：延迟时间

适用环境：输入框搜索时，在一定时间内只触发最后一次输入的事件

//防抖
    function debounce(fn, delay) {
      let timer = null;
      return function (...rest) {
        clearTimeout(timer);
        timer = setTimeout(() => {
          // 如果有参数rest,将参数透传出去
          fn.call(this,rest);
        }, delay)
      }
    }

react版本的防抖

import { useState, useEffect } from "react"
// 防抖hooks
/**
 * 
 * @param {*} value 需要防抖的值，比如搜索框的value
 * @param {*} cb  (value)=>{}
 * @param {*} delay 延迟时间
 * @returns 返回的也是是value
 */
function useDebounce(value, cb = () => { }, delay = 500) {
  const [_value, setValue] = useState(value)

  useEffect(() => {
    const timer = setTimeout(() => {
      setValue(value)
      cb.call(this, value)
    }, delay)
    return () => clearTimeout(timer)
  }, [value, delay])

  return _value
}
export default useDebounce

使用  (可以直接监听返回值或者传一个回调获取值)

// 防抖处理
  const search = useDebounce(searchVal, (v) => {
    console.log(v);
  }, 500)
  useEffect(() => {
    console.log(search);
  }, [search])

节流：

高频事件触发，每次触发事件时设置一个延迟调用方法，并且取消之前延时

调用的方法。

简单概括：每次触发事件时都会判断是否等待执行的延时函数

节流：fn：回调函数，里面可以做数据请求和按钮点击操作，delay：延迟时间

适用环境：点击按钮发起请求时，在一定时间内只触发第一次事件

// 节流
  function throttle(fn, delay) {
    // 1、记录回调函数两次执行的时间间隔
    let lastTime = Date.now() // 函数上一次被执行的时间
    return function () {
      const nowTime = Date.now()
      // 2、如果这个时间间隔大于时间限制，那么我们就让回调函数执行
      if (nowTime - lastTime > delay) {
        // 如果有参数rest,将参数透传出去
        fn.call(this, ...arguments)
        // 更新lastTime
        lastTime = nowTime
      }
    }
  }

区别：

区别：降低回调执行频率，节省计算资源。

防抖和节流本质是不一样的。防抖是将多次执行变为最后一次执行，节流是将

多次执行变成每隔一段事件执行

函数防抖一定连续触发的事件，只在最后执行一次，而函数节流一段时间内只执行

一次。