防抖节流简单用法

import React, { useState, useEffect } from 'react';
import _ from 'lodash'

// 防抖案例
// 比如说搜索功能。他是把上一次的id值清空， 每隔多少秒再去请求后台
let id = ''

export default function Debounce() {

  //防抖 触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间
  // const onChange = event => {
  //   const values = event.target.value

  //   id && clearTimeout(id)

  //   id = setTimeout(() => {
  //     console.log('请求后台', values)
  //   }, 500)
  // }

  //节流   连续触发事件，但是在 n 秒中只会执行一次函数
  //判断如果id值为空，就进入,然后把settimeout值赋值给id,  在settimeout里把id值清空。 每隔多少秒去请求一次后台。
  const onChange = event => {
    const values = event.target.value

    if (!id) {
      id = setTimeout(() => {
        id = null
        console.log('请求后台', values)
      }, 500)
    }
  }
  //防抖
  const debounce = _.debounce(() => console.log('防抖'), 3000)  
  //节流  trailing设置过期时间 最后一次没够多少秒。他也会输出一次
  const throttle = _.throttle(() => console.log('节流') , 3000, { trailing: true })

  return (
    <div>
     <input type="text" onChange={onChange} />

     <input type="text" onChange={throttle} />
    </div>
  );
}