tree组件多次请求接口问题
在使用tree组件时，如
子组件中获取选中的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请求接口。
const nodeclicked = (val: any) => {
selectdata.type = val.value.join(",");
getdata(selectdata);
};但是，当快速点击tree组件时，会触发多次接口请求。
解决方法
方法一：防抖
// 引入防抖函数，如lodash的debounce
import { debounce } from 'lodash';
// 父组件中定义防抖处理的nodeclicked方法
const debouncednodeclicked = debounce(nodeclicked, 300); // 延迟时间可以根据需求调整
// 修改子组件引用，使用防抖后的回调函数
方法二：延迟处理
// 子组件中引入一个定时器和一个临时变量存储待发送的节点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); // 延迟时间可以根据需求调整
}; 
