如何避免内容未变更时触发$.POST请求？附当前实现代码

针对你遇到的问题，其实有两个方向可以优化——既可以保留mouseleave的提交逻辑减少无意义请求，也可以考虑更贴合用户操作习惯的提交方式，我分别给你梳理下：

一、优化现有mouseleave逻辑，避免无意义提交 #

核心思路是缓存上次提交的选中状态，只有当当前选中内容和上次提交的不一样时，才触发POST请求，同时搭配防抖处理，避免快速进出div时的连续触发：

1. 先在合适的作用域定义变量，存储上次提交的选中值：

let lastSubmittedSelections = [];

2. 修改postPareto函数，先对比当前选中值和缓存值，只有不同时才发送请求：

function postPareto() {
  const currentSelections = config_Array();
  // 这里假设config_Array返回的结构可以通过JSON.stringify直接对比，若为复杂对象数组可改用深对比函数
  if (JSON.stringify(currentSelections) !== JSON.stringify(lastSubmittedSelections)) {
    $.ajax({
      type: "POST",
      data: JSON.stringify(currentSelections),
      url: "api/prodotti/pareto/",
      contentType: "application/json",
      success: function (dati) {
        tablePareto(dati);
        // 请求成功后更新缓存值，确保下次对比准确
        lastSubmittedSelections = [...currentSelections];
      }
    });
  }
}

3. 给mouseleave事件加上防抖，防止快速进出时的多次触发（比如设置300ms延迟，这段时间内再次触发就重置计时）：

// 简易防抖函数
function debounce(func, delay = 300) {
  let timeoutId;
  return function() {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, arguments), delay);
  };
}

// 绑定防抖后的mouseleave事件
$("div.sidebar-wrapper").mouseleave(debounce(postPareto));

小提示：如果config_Array()返回的是复杂对象数组，单纯JSON.stringify对比可能因属性顺序问题出现误判，这时候可以自己写一个深对比函数来替代，或者确保config_Array返回的数组结构是稳定的。

二、考虑更贴合用户操作的提交方式 #

如果不想依赖mouseleave，也可以试试这些更精准的方案：

• 手动提交按钮：在复选框树区域加一个「应用筛选」按钮，用户选完后主动点击提交，完全避免自动提交的不确定性，操作逻辑更清晰。
• 利用复选框树插件的原生事件：如果你的复选框树用了第三方插件（比如zTree、jQuery Tree等），通常会提供「批量选择完成」或「选中状态稳定」的回调事件，绑定这类事件提交比mouseleave更精准。
• 基于选择操作的延迟提交：监听每个复选框的change事件，每次触发后启动一个1-2秒的定时器，如果这段时间内没有新的选择操作，再自动提交——既给用户充足的选择时间，又不会因鼠标进出频繁触发请求。

总结 #

如果想保留mouseleave的自动提交体验，第一种缓存+防抖的方案完全可以解决你的问题；如果希望更精准的触发时机，手动按钮或插件自带的选择完成事件会更合适。

内容的提问来源于stack exchange，提问作者NiceToMytyuk