函数n秒后执行 lodash中的debounce

在做一些表单类数据时，需要根据当前输入的值，像后台请求不同的数据；每次键盘输入都会调用接口API，太别频繁；能不能等用户不在输入了，在请求后端，做个延迟；这里就需要用到lodash了，话不多说上代码：

1.安装lodash插件

npm  install   lodash

2.引入插件开干

/*
 * CRH文件下载
 */
import React, { Component } from "react";
import Storage from "store2";
import axios from "axios";
import debounce from "lodash/debounce";
import {
  Select,
  Radio,
  Row,
  Col,
  DatePicker,
  Divider,
  Button,
  Notification,
} from "antd";
import Request from "@utils/request";
import moment from "moment";
import "./crh.less";

const { Option } = Select;
class View extends Component {
  constructor(props) {
    super(props);
    this.onSearch = debounce(this.onSearch, 500); // 下拉框输入时调用onSearch方法
    this.state = {
      startTime: moment(), 
      orgArr: [],
      bankCode: "", 
      radioVal: "",
    };
  }
  componentDidMount() {}
  // 修改开始时间
  changeStartTime = (time) => {
    this.setState({
      startTime: time,
    });
  };
  // 修改机构名称
  onChange = (value) => {
    this.setState({
      bankCode: value,
    });
  };
  onSearch = (val) => {
    Request.GET("/api/org-manage/getOrgList", {
      params: {
        orgName: val,
      },
    }).then((res) => {
      if (res.message === "success") {
        this.setState({
          orgArr: res.data,
        });
      }
    });
  };
  //处理下载流
  download = (content, fileName) => {
    const blob = new Blob([content]); //创建一个类文件对象：Blob对象表示一个不可变的、原始数据的类文件对象
    const url = window.URL.createObjectURL(blob); //URL.createObjectURL(object)表示生成一个File对象或Blob对象
    let dom = document.createElement("a"); //设置一个隐藏的a标签，href为输出流，设置download
    dom.style.display = "none";
    dom.href = url;
    dom.setAttribute("download", fileName); //指示浏览器下载url,而不是导航到它；因此将提示用户将其保存为本地文件
    document.body.appendChild(dom);
    dom.click();
  };
  // 请求后端预下载
  tryCrhDown = () => {
    const { startTime, bankCode, radioVal } = this.state;
    let _this = this;
    axios({
      method: "get", //请求方式
      url: `${Storage.get("gzhhost")}/download/crh`,
      headers: {
        token: Storage.get("Authorization"),
        currency: Storage.get("currency"),
      },
      params: {
        bankCode: bankCode,
        type: radioVal,
        queryDate: moment(startTime).format("YYYY-MM-DD"),
        loginName: Storage.get("loginRes").loginName,
      }, //请求参数
    }).then((response) => {
      console.log(response);
      if (response.data.isAsync !== undefined) {
        // 是否异步true
        if (response.data.isAsync) {
          setInterval(() => _this.catchDown(), 10000);
        } else {
          this.crhDown();
        }
      } else {
        Notification.error({
          message: response.data.message || "下载失败",
        });
      }
    });
  };
  // 异步循环调用
  catchDown = () => {
    axios({
      method: "get", //请求方式
      url: `${Storage.get("gzhhost")}/download/init`,
      headers: {
        token: Storage.get("Authorization"),
        currency: Storage.get("currency"),
      },
      params: {
        loginName: Storage.get("loginRes").loginName,
      }, //请求参数
    }).then((res) => {
      console.log(res);
    });
  };
  // 真实下载
  crhDown = () => {
    const { startTime, bankCode, radioVal } = this.state;
    axios({
      method: "get", //请求方式
      url: `${Storage.get("gzhhost")}/download/async/crh`,
      headers: {
        token: Storage.get("Authorization"),
        currency: Storage.get("currency"),
      },
      params: {
        // bankCode: bankCode,
        // type: radioVal,
        // queryDate: moment(startTime).format("YYYY-MM-DD"),
        loginName: Storage.get("loginRes").loginName,
      }, //请求参数
      // responseType: "blob", //服务器返回的数据类型
    }).then((response) => {
      const content = response.data; //返回的内容
      const fileName = moment(startTime).format("YYYY-MM-DD") + ".zip"; //下载文件名
      this.download(content, fileName);
    });
  };
  render() {
    const { startTime, orgArr, radioVal } = this.state;
    return (
      

        
冠字号下载
        
        
          
            机构名称:
            
              {orgArr.map((item) => {
                return (
                  
                    {item.orgName}
                  
                );
              })}
            
          
          
            业务时间：
            
          
          
            状态：
             {
                this.setState({
                  radioVal: e.target.value,
                });
              }}
            >
              全部
              柜面业务
              自助业务
            
          
          
             this.tryCrhDown()}>
              下载
            
          
        
      
    );
  }
}

export default View;