防抖和节流是针对响应跟不上触发频率这类问题的两种解决方案。

防抖

debounce，去抖动。在一定时间内，多次触发同一个事件，只执行最后一次操作。在用户停止某个操作一段时间之后才执行相应的监听函数，而不是在用户操作的过程当中，浏览器触发多少次事件，就执行多少次监听函数。

当事件被触发时，设定一个周期延迟执行动作，若期间又被触发，则重新设定周期，直到周期结束，执行动作。

这是debounce的基本思想，在后期又扩展了前缘debounce（立即执行），即执行动作在前，然后设定周期，周期内有事件被触发，不执行动作，且周期重新设定。

/**
 * @description: 防抖函数
 * @param {*} func
 * @param {*} duration
 * @return {*}
 */
function debounce(func, duration = 500) {
  let timer;
  return function () {
    timer && clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, arguments);
    }, duration);
  };
}

<div class="div-left">
      <div class="action-point-list">
        <div
          @click="handleActionPoint(item)" // 触发
          :key="item.id"
          v-for="item in executionData.workActionPointData"
          :class="renderActionStyle(item)"
        >
          <div
            :class="
              item?.mesProductionRunTrace?.status === 'FINISH'
                ? 'action-content-time'
                : 'action-content'
            "
。。。。。。。省略

// 业务函数使用防抖函数

/**
 * @description: 点击动作点
 * @param {*} params
 * @return {*}
 */
const handleActionPoint = debounce(async (params) => {
  const status = renderActionStyle(params);
  // 如果是绿色,只有绿色才能弹窗
  if (status === 'todoActionBorder') {
    // 并且是INIT的才调用初始化接口
    if (
      params?.mesProductionRunTrace === null ||
      params?.mesProductionRunTrace.status === 'INIT'
    ) {
      const needList = {
        mesProductionRunId: selectedWorkOrderData.value.id,
        mesRunFunction: params.id,
      };
      const response = await handleProductRun(needList);
      // 成功初始化后刷新
      if (response.code === 1) {
        await fetchRunViewData();
        const needResponse = await fetchActionPointData();
        if (needResponse.code === 1) {
          // 需要拿到刷新后的动作点数据中的检验任务id来查询任务下的检验任务项点
          executionData.workActionPointData.forEach((item) => {
            if (item.id === params.id) {
              params.mesProductionRunTrace = {};
              params.mesProductionRunTrace.linkedTaskId =
                item.mesProductionRunTrace.linkedTaskId;
              params.mesProductionRunTrace.id = item.mesProductionRunTrace.id;
            }
          });
          // 判断是否需要弹窗
          renderModal(params);
        }
      }
      // 弹窗
    } else if (params?.mesProductionRunTrace.status === 'RUN') {
      // 如果是绿色并且是进行中
      // 判断是否需要弹窗
      renderModal(params);
    }
  }
});

节流

throttling，当持续触发事件时，保证隔间时间触发一次事件。

固定周期内，只执行一次动作，若有新事件触发，不执行。周期结束后，又有事件触发，开始新的周期。

节流策略也分前缘和延迟两种。与debounce类似，延迟是指 周期结束后执行动作，前缘是指执行动作后再开始周期。