tree组件多次请求接口问题

在使用tree组件时，如

<checktreee @nodeclicked="nodeclicked" />

子组件中获取选中的id并发送请求。

@check-change="handleclick"
const handleclick = async (node: any, ischeck: any) => {
  if (ischeck) {
    checkid.value.push(node.id);
  } else {
    checkid.value.foreach((item, i) => {
      if (item === node.id) {
        checkid.value.splice(i, 1);
      }
    });
  }
  emit("nodeclicked", checkid);
};

父组件中根据id请求接口。

Nodejs Patterns

内容：生产级 Node.js 后端模式，涵盖 Express/Fastify 配置、分层架构、中间件、错误处理、验证、数据库集成、身份验证及缓存。 时机：构建 REST API、搭建 Node.js 服务器、实施身份验证、集成数据库、添加验证/缓存或构建后端应用结构时。 关键词：nodejs, node, express, fastify, typescript, api, rest, 中间件, 身份验证, jwt, 验证, zod, postgres, mongodb, redis, 缓存, 速率限

下载

const nodeclicked = (val: any) => {
  selectdata.type = val.value.join(",");
  getdata(selectdata);
};

但是，当快速点击tree组件时，会触发多次接口请求。

解决方法

方法一：防抖

// 引入防抖函数，如lodash的debounce
import { debounce } from 'lodash';

// 父组件中定义防抖处理的nodeclicked方法
const debouncednodeclicked = debounce(nodeclicked, 300); // 延迟时间可以根据需求调整

// 修改子组件引用，使用防抖后的回调函数
<checktreee @nodeclicked="debouncednodeclicked" />

方法二：延迟处理

// 子组件中引入一个定时器和一个临时变量存储待发送的节点ID
let timer: NodeJS.Timeout | null = null;
let pendingNodeIds: any[] = [];

const handleClick = async (node: any, isCheck: any) => {
  if (isCheck) {
    checkID.value.push(node.id);
    pendingNodeIds.push(node.id);
  } else {
    checkID.value.forEach((item, i) => {
      if (item === node.id) {
        checkID.value.splice(i, 1);
      }
    });
    pendingNodeIds = pendingNodeIds.filter(id => id !== node.id);
  }

  clearTimeout(timer); // 清除之前的定时器
  timer = setTimeout(() => {
    // 在延迟时间后触发nodeClicked事件，发送请求
    emit("nodeClicked", pendingNodeIds);
    pendingNodeIds = []; // 重置待发送节点ID列表
  }, 300); // 延迟时间可以根据需求调整
};