如何解决 Tree 组件快速点击导致接口多次请求的问题？

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请求接口。

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); // 延迟时间可以根据需求调整
};

以上就是如何解决 Tree 组件快速点击导致接口多次请求的问题？的详细内容，更多请关注硕下网其它相关文章！